📅  最后修改于: 2020-12-19 08:35:25             🧑  作者: Mango
列表用于以有序格式显示数据,主要用于显示网站上的菜单。在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代码将在控制台上记录输出。代码的输出如下。
[5, 10, 15, 20, 25]
现在,让我们看看如何在React中创建列表。为此,我们将使用map()函数遍历list元素,并进行更新,将其括在花括号{}之间。最后,我们将数组元素分配给listItems。现在,将此新列表包含在 ul>
元素内,并将其呈现到DOM。
import React from 'react';
import ReactDOM from 'react-dom';
const myList = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
const listItems = myList.map((myList)=>{
return {myList} ;
});
ReactDOM.render(
{listItems}
,
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) =>
{myList}
);
return (
Rendering Lists inside component
{listItems}
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
,
document.getElementById('app')
);
export default App;
输出量