如何使用 Map 函数在 React 中渲染对象数组？

在 React 中渲染对象数组

在 React 中渲染列表对于显示动态数据至关重要。本指南展示了如何使用 map 函数在 React 中高效渲染对象数组。

方法：

考虑以下 React 组件：

<code class="javascript">class First extends React.Component {
  render() {
    const data = [{ name: "test1" }, { name: "test2" }];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

渲染对象数组有两种主要方法：

第一种方法：

将映射的数组分配给变量并在渲染函数中返回它:

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>

第二种方法：

直接将map函数嵌入到return语句中：

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

以上是如何使用 Map 函数在 React 中渲染对象数组？的详细内容。更多信息请关注PHP中文网其他相关文章！