React 列表
列表用于以有序格式显示数据，主要用于显示网站上的菜单。在React中，可以使用类似于在JavaScript中创建列表的方式来创建列表。让我们看看如何在常规JavaScript中转换列表。
map()函数用于遍历列表。在下面的示例中，map()函数采用数字数组并将其值乘以5、我们将map()返回的新数组分配给变量multipleNums，并将其记录下来。
示例
var numbers = [1, 2, 3, 4, 5];
const multiplyNums = numbers.map((number)=>{
return (number * 5);
});
console.log(multiplyNums);
输出
上面的JavaScript代码将在控制台上记录输出。代码输出如下。
现在，让我们看看如何在React中创建列表。为此，我们将使用map()函数遍历list元素，并进行更新，将它们括在花括号{} 之间。最后，我们将数组元素分配给listItems。现在，将此新列表包含在 元素中，并将其呈现到DOM。
示例
import React from 'react';
import ReactDOM from 'react-dom';
const myList = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
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>Rendering Lists inside component</h2>
<ul>{listItems}</ul>
</div>
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
<NameList myLists={myLists} />,
document.getElementById('app')
);
export default App;
输出
