📌  相关文章
📜  React Map

📅  最后修改于: 2020-12-19 08:43:37             🧑  作者: Mango

反应图

映射是一种数据收集类型，其中数据以成对的形式存储。它包含一个唯一的密钥。映射中存储的值必须映射到键。我们不能在map()中存储重复的对。这是因为每个存储密钥的唯一性。它主要用于快速搜索和查找数据。

在React中，?map?用于遍历和显示组件相似对象列表的方法。映射不是React的功能。而是可以在任何数组上调用的标准JavaScript函数。 map()方法通过在调用数组中的每个元素上调用提供的函数来创建新数组。

例

在给定的示例中，map()函数采用数字数组并将其值加倍。我们将map()返回的新数组分配给变量doubleValue并将其记录下来。

var numbers = [1, 2, 3, 4, 5]; 
const doubleValue = numbers.map((number)=>{ 
    return (number * 2); 
}); 
console.log(doubleValue);

在React中，map()方法用于：

1.遍历列表元素。

例

import React from 'react'; 
import ReactDOM from 'react-dom'; 

function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((myList) =>
    
  • {myList}
    • 
  );
  return (
    
    
          
    React Map Example
    
              
      {listItems}
    
    
    
  );
}
const myLists = ['A', 'B', 'C', 'D', 'D']; 
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    输出量

    2.使用键遍历列表元素。

    例

    import React from 'react'; 
import ReactDOM from 'react-dom'; 

function ListItem(props) {
  return 
  • {props.value}
    • ;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    
  );
  return (
    
    
      
    React Map Example
    
          
       {listItems} 
    
    
    
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    输出量