反应清单

列表用于以有序格式显示数据，主要用于显示网站上的菜单。在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。现在，将此新列表包含在

元素内，并将其呈现到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;

输出量