上一章ReactJS实战教程请查看:React使用5种条件渲染
列表用于以有序的格式显示数据,主要用于在网站上显示菜单。在React中,创建列表的方式与我们在JavaScript中创建列表的方式类似。让我们看看如何在常规JavaScript中转换列表。
map()函数用于遍历列表。在下面的示例中,map()函数接受一个数字数组,并将其值乘以5,我们将map()返回的新数组分配给变量multiplyNums并记录它。
例子
var numbers = [1, 2, 3, 4, 5];
const multiplyNums = numbers.map((number)=>{
return (number * 5);
});
console.log(multiplyNums);
现在,让我们看看如何在React中创建一个列表。为此,我们将使用map()函数来遍历列表元素,对于更新,我们将它们括在大括号{}之间。最后,我们将数组元素分配给listItems。现在,将这个新列表包含在<ul> </ul>元素中,并将其渲染到DOM中。
例子
import React from 'react';
import ReactDOM from 'react-dom';
const myList = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'];
const listItems = myList.map((myList)=>{
return <li>{myList}</li>;
});
ReactDOM.render(
<ul> {listItems} </ul>,
document.getElementById('app')
);
export default App;
组件内部渲染列表
在前面的示例中,我们直接将列表渲染给DOM,但是在React中呈现列表不是一个好的实践。在React中,我们已经看到所有东西都是作为单独的组件构建的。因此,我们需要在组件中渲染列表。我们可以在下面的代码中理解它。
例子
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>
<h2>在组件内部渲染列表</h2>
<ul>{listItems}</ul>
</div>
);
}
const myLists = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'];
ReactDOM.render(
<NameList myLists={myLists} />,
document.getElementById('app')
);
export default App;
评论前必须登录!
注册