JavaScript >> Javascript 文檔 >  >> React

如何在 React JSX 中循環

Javascript 語法擴展 (JSX) , 是 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 中的循環

map() ES6 中引入的函數是 JSX 中唯一首選的循環方法:

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

對於數組中的每個元素,我們映射其 textstatus <p> 中的內容字段 元素,其 key 映射到 id 場地。這將生成以下標記結果:

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

了解 屬性

根據您使用的框架/linting 工具,如果您不使用唯一的 key 每個 <p> 的值 元素,你很可能會遇到警告:

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

在 React 循環中幫助識別哪些項目已被更改、添加或刪除,並且在循環中賦予父元素很重要唯一 有助於為元素或組件提供穩定標識的關鍵。

就像我們的 todos 數組示例,我們可以指定每個待辦事項 id 作為關鍵:

{
  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 中循環的基礎知識、鍵的工作原理以及如何向可迭代元素添加唯一鍵。


Tutorial JavaScript 教程
  1. Javascript 正則表達式:測試人名

  2. 現代編程語言中的並發性:Rust vs Go vs Java vs Node.js vs Deno vs .NET 6

  3. tsParticles v1.16.0 發布

  4. 如何使用 map() reduce() 和 filter() ?

  5. 如何構建 AdonisJS API 來存儲您的 Raspberry Pi 溫度

  6. 在 JavaScript 中實現選擇排序算法

  7. Observables:它們是如何工作的?

  1. 按值傳遞與按引用傳遞

  2. 節點觀察者模式

  3. 構建/打包您的 Electron 應用程序並在本地使用它。

  4. 快速提示:使用 .reduce() 將數組轉換為對象

  5. ES6 模塊支持瀏覽器中的土地:是時候重新考慮捆綁了嗎?

  6. 內聯 SVG css 動畫在 Safari 上不起作用

  7. React 和 Redux

  1. 我的雞蛋引用天氣應用程序

  2. 使用 LaunchDarkly 功能標誌和賽普拉斯的前端應用程序的有效測試策略。第 1 部分:設置

  3. AJAX 實現的 24 個最佳實踐

  4. 使用 Arduino 和 Tensorflow.js 玩帶有身體動作的街頭霸王