本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3826
原文：https://www.fullstackreact.com/30-days-of-react/day-13/

今天，我們將通過如何顯示多個組件來準備將外部數據引入我們的應用。

我們已經構建了一個沒有任何外部數據的基本應用。在我們實現之前 (我們將在明天開始這個功能), 讓我們來看看過去兩周中我們所掩蓋的事情:

重復元素

我們已經看到了這之前, 我們已經遍歷了一個對象列表, 并在屏幕上呈現多個組件。在我們的應用中添加太多的復雜度來加載外部數據之前, 今天我們將快速了解如何在應用中重復組件/元素。

由于 jsx 被瀏覽器視為純 javascript 的, 我們可以使用任何 傳統 javascript 內的模板標簽中的 jsx。我們已經看到了這一行動。作為一個快速演示:

const App = (props) => {return (<ul>{a.map(i => {return <li>{i}</li>})}</ul>) }

注意模板標簽{} 內的內容看起來簡單的 javascript。那是因為它 只是 javascript。此功能允許我們使用 (大多數) 的 javascript 在我們的模板標簽 包括 原生迭代器, 如 map和 forEach 。

讓我們來看看這是什么意思。讓我們將上一個示例的 a 值從單個整數轉換為整數列表:

const a = [1, 10, 100, 1000, 10000];

我們可以將 a 變量映射到我們的組件中, 并返回將為我們構建虛擬 DOM 的響應組件列表。

const App = (props) => {return (<ul>{a.map(i => {return <li>{i}</li>})}</ul>) }

什么是map() 函數?

map() 函數是數組中一個原生javascript內置函數的。
它接受在數組的每個元素上運行的函數, 因此, 上面的函數將運行四次, 其值為i 開始為1 , 然后它將再次運行它的第二個值, i將被設置為10 等等等等。

讓我們更新我們在第12天創建的應用與我們的 App 組件在這里。讓我們打開我們的src/App.js 文件, 并將 App 組件的內容替換為此源。清理一些未使用的變量和您的src/App.js應該類似于以下內容:

import React from 'react';const a = [1, 10, 100, 1000, 10000]; const App = (props) => {return (<ul>{a.map(i => {return <li>{i}</li>})}</ul>) }export default App

使用create-react-app命令生成的命令再次啟動應用:npm start, 我們可以看到應用在瀏覽器中工作!

但是, 如果我們打開開發人員控制臺, 我們將看到打印出錯誤。此錯誤是由以下事實引起的: React不知道如何跟蹤我們列表中的各個組件, 因為它們只是看起來像一個 <li />組件。

出于性能原因, React使用虛擬 DOM 嘗試限制在重新視圖時需要更新的 DOM 元素的數量。如果沒有任何變化, React不會使瀏覽器更新任何東西以節省工作。

此功能非常適合于構建 web 應用, 但有時我們必須通過為節點提供唯一標識符來幫助做出React。在映射列表和渲染組件是其中之一。

React要求我們通過使用特殊屬性來識別惟一的組件, 這是列表中每個元素的 key 屬性。key 屬性可以是任何我們想要的, 但它 必須是唯一的 的元素。在我們的示例中, 我們可以在 map 中使用i變量, 因為數組中沒有其他元素具有相同的值。

讓我們更新映射來設置key:

const App = (props) => {return (<ul>{a.map(i => {return <li key={i}>{i}</li>})}</ul>) }

子組件

我們在本周早些時候談到了建立父子關系的事情, 但是讓我們更詳細地介紹一下如何訪問父組件中的子組件, 以及如何呈現它們。

在第11天, 我們構建了一個 <Formatter />組件來處理時鐘組件中的日期格式, 以使用戶能夠靈活地使用自己的自定義時鐘渲染?；叵胍幌? 我們所創建的實現實際上是相當丑陋和相對復雜的。

const Formatter = (props) => {let children = props.format.split('').map((e, idx) => {if (e === 'h') {return <Hour key={idx} {...props} />} else if (e === 'm') {return <Minute key={idx} {...props} />} else if (e === 's') {return <Second key={idx} {...props} />} else if (e === 'p') {return <Ampm key={idx} {...props} />} else if (e === ' ') {return <span key={idx}> </span>;} else {return <Separator key={idx} {...props} />}});return <span>{children}</span>; }

我們可以用React.Children 對象來映射一個React對象的列表, 并讓React做這個自舉。其結果是一個更干凈的 Formatter組件 (不是完美的, 但可使用的):

const Formatter = ({format, state}) => {let children = format.split('').map(e => {if (e == 'h') {return <Hour />} else if (e == 'm') {return <Minute />} else if (e == 's') {return <Second />} else if (e == 'p') {return <Ampm />} else if (e == ' ') {return <span> </span>;} else {return <Separator />}});return (<span>{React.Children.map(children, c => React.cloneElement(c, state))}</span>) }

React.cloneElement

我們還沒有談論React.cloneElement() 函數, 所以讓我們簡單地看看它。
記得 WWWWWAAAAAYYYYY（way） 回到第2天, 我們看了如何瀏覽器 看待 JSX? 它把它變成了類似于如下的 javascript:

React.createElement("div", null, React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),React.createElement("h1", null, "Welcome back Ari") );

React.cloneElement() 為我們處理這個。有時我們會想復制它或添加自定義props/children的組件，而不是創建一個新的組件實例 (如果我們已經有一個)。所以我們可以保留它創建的相同的屬性。我們可以用React.cloneElement() 來為我們處理這一切。

React.cloneElement() 和React.createElement() 函數有相同的api，參數所在的位置:

我們要克隆的 ReactElement

我們要添加到實例中的任何 props

我們希望它有任何children

在我們的 Formatter 示例中, 我們正在創建列表中所有子級 (<Hour />, <Minute />等組件) 并將state 對象作為其屬性。

React.Children 的對象提供了一些很好的實用工具來處理children的函數。上面的 Formatter 示例使用 map 函數循環訪問子級, 并在列表中克隆每一個。它為每一個創建一個key (如果需要), 使我們不必自己管理唯一性。

讓我們使用React.Children.map() 函數更新我們的應用組件:

const App = (props) => {return (<ul>{React.Children.map(a, i => <li>{i}</li>)}</ul>) }

在瀏覽器中, 一切仍然正常。

在 React.Children 中還有其他一些非常有用的方法，我們將主要使用React.Children.map() 函數，但了解其他可用的 對我們來說也是很好的。 點擊文檔 查看更多列表。

通過這一點, 我們只處理了本地數據, 而不是真正關注遠程數據 (盡管我們在構建活動提要組件時 已經 簡要地提到了它)。明天, 我們將進入與服務器的互動, 所以我們可以使用它在我們的React應用。

今天的工作很棒!

總結

以上是生活随笔為你收集整理的【全栈React】第13天: 重复元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。