上一章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中，我们已经看到所有东西都是作为单独的组件构建的。因此，我们需要在组件中渲染列表。我们可以在下面的代码中理解它。
【React使用列表和map()函数 – ReactJS实战教程】例子
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;
推荐阅读
- React key的作用和用法 – ReactJS实战教程
- React使用5种条件渲染 – ReactJS实战教程
- React事件和事件处理 – ReactJS实战教程
- React表单form用法 – ReactJS实战教程
- React受控组件和非受控组件之间的区别 – ReactJS实战教程
- React组件生命周期详细解析 – ReactJS实战教程
- React组件API用法全解 – ReactJS实战教程
- React构造函数constructor用法详解 – ReactJS实战教程
- React状态state和属性props之间的区别 – ReactJS实战教程