React 中的 for 迴圈

Irakli Tchigladze 2023年1月30日 2021年12月4日
  1. 在 React 中使用 .map() 方法實現 for Map
  2. JavaScript for 迴圈
  3. 立即呼叫的函式
React 中的 for 迴圈

處理複雜的後端資料是前端開發人員工作的一部分。通常,資料包括代表 UI 的元件或其他構建塊的物件列表。

例如,在建立線上商店時,資料可能包含需要出現在網站上的產品列表。由於多種原因,手動檢視列表並一個一個地建立元件是低效的。例如,如果某個產品被刪除或新增到列表中,你會怎麼做?你不能每次都回去更新你的 JSX 檔案。

有多種方法可以遍歷列表並自動呈現元件或 HTML 元素。

在 React 中使用 .map() 方法實現 for Map

ES6 中引入的 .map() 方法是迴圈陣列並返回一個有效的 JSX 元素的預設方法,該元素包含來自陣列中每個專案的資料。開發人員通常使用此方法來建立自定義元件以及常規 HTML 元素。

儘管還有其他方法來執行迴圈,但大多數 React 開發人員使用 .map() 方法,因為它易於閱讀、編寫和維護。以下是如何遍歷物件陣列並將使用者資料呈現到螢幕上:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

輸出:

John Doe, 44 years old

Jane Doe, 45 years old

請記住,map() 方法在本示例中將執行兩次,每次都返回一個段落元素。這就是為什麼必須用 <div></div> 包裝其結果的原因。每個元件都必須返回一個父容器,擁有任意數量的子元素。

key 屬性

請記住,使用 .map() 方法建立的每個元素都必須有一個 key 識別符號,並設定為唯一值。

<p key={person.name}>{}</p>)

React 不建議使用 index 值來為 key 屬性生成唯一值。

傳遞 props

如果你打算使用 .map() 方法來渲染多個元件,你也可以傳遞 props

假設我們正在嘗試渲染多個 Product 元件。以下是我們如何傳遞 props

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript for 迴圈

迴圈陣列的另一種方法是使用 for 迴圈。如果你選擇這種方法,你必須在 return 塊上方執行迴圈。

程式碼如下所示:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

.map() 相比,這種方法更加冗長且難以理解。但是,結果將是相同的。

立即呼叫的函式

return 語句中使用 for 迴圈在技術上是可行的,但是你必須建立一個函式並使用 for 迴圈作為主體。一旦你寫完函式,你應該在它後面加上括號 () 以立即呼叫它。這是它的工作原理:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn