React使用列表和map()函数 – ReactJS实战教程

上一章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;