React JS新手：如何通过循环复用组件精简代码？

在React中，你可以利用数组的map()方法遍历notes数组，动态生成对应的ExpenseItem组件，无需重复编写代码。具体实现如下：

修改后的完整代码 #

import "./App.css";
import ExpenseItem from "./components/NoteItem";
import AppHeader from "./components/AppHeader";

function App() {
  const notes = [
    {
      title: "To do",
      date: new Date(2022, 11, 12),
      body: "Alagaan mo sarili mo mark",
    },
    {
      title: "To do1",
      date: new Date(2022, 11, 12),
      body: "Alagaan mo sarili mo mark1",
    },
    {
      title: "To do2",
      date: new Date(2022, 11, 12),
      body: "Alagaan mo sarili mo mark2",
    },
    {
      title: "To do3",
      date: new Date(2022, 11, 12),
      body: "Alagaan mo sarili mo mark3",
    },
  ];

  return (
    <div className="App">
      <AppHeader />
      {/* 遍历数组批量生成组件 */}
      {notes.map((note, index) => (
        <ExpenseItem
          key={index} // 必须添加key属性，帮助React识别列表项
          title={note.title}
          date={note.date}
          body={note.body}
        />
      ))}
    </div>
  );
}

export default App;

核心要点说明 #

• map()方法：遍历notes数组的每一项，对每个note对象返回一个ExpenseItem组件，最终生成组件数组，React会自动渲染数组内的所有组件。
• key属性：React列表渲染的必填项，用于唯一标识列表项，提升DOM更新效率。这里临时使用数组索引index作为key，若后续数据有新增、删除或排序操作，建议给每个note添加唯一id字段（如id: 1），改用key={note.id}更可靠。
• 简化写法：无内容的组件标签可写成自闭合形式（如<AppHeader />），精简代码结构。

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