登录 主页

React map 的使用

2024-06-14 11:01PM

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

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

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

1.遍历列表元素：

eg：

import React, { Component } from 'react';

function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((myList, index) =>
    <li key={index}>{myList}</li>
  );
  return (
    <div>
      <h2>React Map Example</h2>
      <ul>{listItems}</ul>
    </div>
  );
}

class Map extends Component {
  state = {
    myLists: ['A', 'B', 'C', 'D', 'D']
  }

  render() {
    return (
      <NameList myLists={this.state.myLists} />
    );
  }
}

export default Map;

2.用键遍历列表元素

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function ListItem(props) {  
  return <li>{props.value}</li>;  
}  
  
function NumberList(props) {  
  const numbers = props.numbers;  
  const listItems = numbers.map((number) =>  
    <ListItem key={number.toString()}  
              value={number} />  
  );  
  return (  
    <div>  
      <h2>React Map例子</h2>  
          <ul> {listItems} </ul>  
    </div>  
  );  
}  
  
const numbers = [1, 2, 3, 4, 5];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,  
  document.getElementById('app')  
);  
export default App;

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论