您好,登录后才能下订单哦!
这篇文章主要讲解了“react有哪些遍历方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react有哪些遍历方法”吧!
react遍历方法有:1、使用foreach()方法,语法“list.forEach((item)=>{...});”;2、使用map()方法,语法“list.map((item, index)=>{...});”。
本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。
react采用forEach或map两种遍历方式
1、foreach(推荐)
list.forEach((item)=>{ });
例:
dataSource.forEach((item) => { const est = item.estimateAmount === null ? 0 : parseFloat(item.estimateAmount); const gmv = item.estimateGmv === null ? 0 : parseFloat(item.estimateGmv); allCountBudget += est; allCountGmv += gmv; // allCountGmv = parseFloat(allCountGmv) + parseFloat(gmv); });
2、map
list.map((item, index)=>{ });
在React里map方法用于遍历和显示组件的类似对象列表,map不是React特有的,相反,它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。
例:
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue);
在React中,map()方法用于:
1、遍历列表元素。
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <div> <h3>React Map例子</h3> <ul>{listItems}</ul> </div> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') ); export default App;
2. 用键遍历列表元素。
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h3>React Map例子</h3> <ul> {listItems} </ul> </div> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('app') ); export default App;
感谢各位的阅读,以上就是“react有哪些遍历方法”的内容了,经过本文的学习后,相信大家对react有哪些遍历方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。