如何在React与JSX中仅遍历一次数组生成分离的时间线元素？

给定对象数组：

const itensArray = [
  { "year": 2000, "text": "Lorem ipsum" }, 
  { "year": 2010, "text": "Hello World" },
  { "year": 2020, "text": "This is the end" }
];

要只遍历一次就生成年份和文本两个分离的列表，不能用map（因为map每次只能返回单个值），改用reduce方法来累积两个列表的元素，具体实现如下：

// 单次遍历生成两个列表元素数组
const { yearsList, textsList } = itensArray.reduce((acc, item) => {
  acc.yearsList.push(<li key={item.year}>{item.year}</li>);
  acc.textsList.push(<li key={item.year}>{item.text}</li>);
  return acc;
}, { yearsList: [], textsList: [] });

// 渲染时间线结构
return (
  <div>
    <div className="timeline-years">
      <ul>{yearsList}</ul>
    </div>
    <div className="timeline-texts">
      <ul>{textsList}</ul>
    </div>
  </div>
);

说明 #

• reduce的初始值是一个包含两个空数组的对象，分别用来存储年份项和文本项的React元素
• 遍历每个对象时，分别创建对应的<li>元素（注意添加唯一key属性，符合React列表渲染规范），并推入对应数组
• 遍历完成后，直接从返回的对象中取出两个列表，插入到指定的DOM结构即可

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