易百教程

27、React中的列表是什么?

列表用于以有序格式显示数据。在 React 中,列表的创建方式与我们在 JavaScript 中创建列表的方式类似。可以使用 map() 函数遍历列表的元素。

例子

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;