如何通过数组映射返回React组件？附代码示例

我来给你拆解这段React代码里用数组映射生成组件的逻辑，核心就是React里最常用的数据驱动UI思路——不用重复写相同的列表项代码，直接通过遍历数据自动生成UI。

1. 先看数据源定义 #

首先定义了一个details数组，里面每一项都是包含UI所需信息的对象：

const details = [
  { title: 'location', icon: <Map />, meta: 'foo' },
  { title: 'type', icon: <Map />, meta: 'type' },
  { title: 'duration', icon: <Map />, meta: 'duration' },
  { title: 'date', icon: <Map />, meta: 'date' },
  { title: 'time', icon: <Map />, meta: 'time' },
];

• title：每个列表项的标题文本
• icon：直接传入了react-feather库的<Map />图标组件（React里组件本身也可以作为值存在对象里）
• meta：每个列表项要展示的具体内容

把所有列表项的信息统一存在数组里，后续要加/删/改列表项，直接修改这个数组就行，不用动UI代码，非常灵活。

2. 组件里的映射渲染逻辑 #

在DetailList函数组件中，返回的<ul>标签里用了details.map(item => ...)：

<ul>
  {details.map(item => (
    <li>
      <div>
        <div>{item.icon}</div>
        {/* 这里原本应该还有title和meta的展示，比如 <div>{item.title}</div> <div>{item.meta}</div> */}
      </div>
    </li>
  ))}
</ul>

这里的逻辑是：

• 调用数组的map方法，遍历details里的每一个item
• 对每个item，返回一个<li>列表项组件，把item里的icon（以及title、meta）渲染进去
• React会自动把map返回的这一组<li>元素渲染到<ul>里面，最终生成5个列表项（因为数组里有5个元素）

3. 必须注意的细节 #

这段代码里漏了一个React列表渲染的必填项：唯一的key属性。React需要用key来识别每个列表项的唯一性，避免重渲染时出现错误。所以实际开发中必须给<li>加上key，比如用每个item的title（因为标题都是唯一的）：

<li key={item.title}>
  {/* ...内容 */}
</li>

这种模式在React里非常常用，比如渲染商品列表、导航菜单、表单选项等场景，本质就是把数据和UI分离，用遍历的方式批量生成组件，减少冗余代码。

内容的提问来源于stack exchange，提问作者vizFlux