React

[React] 使用 props.children 傳入 array

second9040

在看 children 並練習的時候遇到的一點問題，簡單記錄。

一開始一直看不懂 children 到底是什麼，足足看了一小時，然後突然發現又是我腦袋開關沒打開的問題XD

 

使用React component時，多半是這樣使用的:

<ComponentName/>

不過其實像這樣的使用方法也可以

<ComponentName> (其他的東西) </ComponentName>

 
而夾在 ComponentName 中間的那個 (其他的東西) ，就是 children。

在 ComponentName 之中，可以透過 props.children 取得寫在 (其他的東西) 裡面的內容。
 

我一開始看的時候，明明看的是中文但我還是沒看懂，

這邊直接用例子說明。一樣用前兩篇抽獎小遊戲的 code 來 demo : childrenDemo

不過看起來其實一樣XD 主要是 code 不同 => children demo code
 

把原本寫在 <DrawGame> 裡面的陣列內容放到 tag 中間，作為 children 傳入。
將 <DrawGame/> 改成:

<DrawGame>
  <span>
    點選 [<span style={{ color: "#a49ef0" }}>抽獎</span>]
    按鈕進行抽獎，抽到數字為2的倍數即中獎。
  </span>
  <span>
    點選 [<span style={{ color: "#ff88bb" }}>清除結果</span>]
    按鈕清除抽獎結果，第一次載入網頁與甫按下 [
    <span style={{ color: "#ff88bb" }}>清除結果</span>] 之後不能點選。
  </span>
  <span>
    亂數數字有做處理，本次與上一次相同時重新取值，確保連續兩次的結果不會相同。
  </span>
</DrawGame>

 

搭配迴圈渲染出來:

<div className="instruction">
  <h3>使用 props.children 傳入 array</h3>
  <ul>{childrenArr(props.children)}</ul>
</div>

 

let childrenArr = (children) => {
  let i = 0;
  let returnTmp = [];
  while (i < children.length) {
    returnTmp.push(<li key={i}>{children[i++]}</li>);
  }
  return returnTmp;
};

 
可以印出 props.children 看傳進來的資料長什麼樣子，

這樣的資料無法透過 array.map()的方式渲染出來
 
一開始有直接嘗試將整個 props.children 丟出來，

<ul>{props.children}</ul>

然後得到的資料就是整個黏在一起，雖然樣式還在XD

 

看看 function childrenArr 的部分，

其實應該也蠻好懂的，就是用 props.children 的長度作為迴圈依據，

一個一個把資料塞進另一個陣列，

最後再將這個陣列渲染出來。

 

這個 demo 只是練習 children 的概念，

目前還沒感覺到這樣傳資料有什麼意義XD

 
 

參考文章
【React.js入門 - 10】 夾在中間的props: children
[筆記][React]用 for 迴圈處理Component