如何利用todos数组在React JSX中进行循环操作

Javascript Syntax Extension (JJSX)，是一个由React框架开发和推广的JavaScript扩展，允许你结构化地渲染元素。它本质上使得在React中写HTML代码更容易（描述UI），由于它的灵活性，JSX在这些年被其他流行的框架采用，如Vue.js。

在这个简短的教程中，我们将看看如何在react JSX元素中进行循环，使用以下todos 数组。

const todos = [
  { id: 1, text: "Learn React", status: "completed" },
  { id: 2, text: "Do something", status: "incomplete" },
  { id: 3, text: "Do something else", status: "incomplete" },
];

React JSX中的循环

ES6中引入的map() 函数是JSX中循环的唯一首选方法。

{
  todos.map((todo) => (
    <p key={todo.id}>
      {todo.text} - {todo.status}
    </p>
  ));
}

对于数组中的每个元素，我们将其text 和status 字段映射到<p> 元素中的内容，其key 被映射到id 字段。这将产生以下标记结果。

<p>Learn React - completed</p>
<p>Do something - incomplete</p>
<p>Do something else - incomplete</p>

理解keyAttribute

根据你使用的框架/提示工具，如果你没有为每个<p> 元素使用唯一的key 值，你很可能会遇到一个警告。

Warning: Each child in a list should have a unique "key" prop

React循环中的键有助于识别哪些项目被改变、添加或删除，给循环内的父元素提供唯一的键很重要，有助于给元素或组件一个稳定的身份。

就像在我们的todos 数组例子中，我们可以指定每个todoid 作为键。

{
  todos.map((todo) => (
    <div key={todo.id}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

id index map()

{
  todos.map((todo, index) => (
    <div key={index}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

结论

在这个简短的教程中，我们已经涵盖了React JSX中循环的基础知识，键是如何工作的，以及如何为可迭代元素添加一个唯一的键。