在看 children 並練習的時候遇到的一點問題，簡單記錄。
一開始一直看不懂 children 到底是什麼，足足看了一小時，然後突然發現又是我腦袋開關沒打開的問題XD
使用React component時，多半是這樣使用的:
不過其實像這樣的使用方法也可以
而夾在 ComponentName 中間的那個 (其他的東西) ，就是 children。
在 ComponentName 之中，可以透過 props.children 取得寫在 (其他的東西) 裡面的內容。
我一開始看的時候，明明看的是中文但我還是沒看懂，
這邊直接用例子說明。一樣用前兩篇抽獎小遊戲的 code 來 demo : childrenDemo
不過看起來其實一樣XD 主要是 code 不同 => children demo code
把原本寫在 <DrawGame> 裡面的陣列內容放到 tag 中間，作為 children 傳入。
將 <DrawGame/> 改成:
點選 [抽獎]
按鈕進行抽獎，抽到數字為2的倍數即中獎。
點選 [清除結果]
按鈕清除抽獎結果，第一次載入網頁與甫按下 [
清除結果] 之後不能點選。
亂數數字有做處理，本次與上一次相同時重新取值，確保連續兩次的結果不會相同。
搭配迴圈渲染出來:
使用 props.children 傳入 array
{childrenArr(props.children)}
let childrenArr = (children) => {
let i = 0;
let returnTmp = [];
while (i < children.length) {
returnTmp.push({children[i++]} );
}
return returnTmp;
};
可以印出 props.children 看傳進來的資料長什麼樣子，
這樣的資料無法透過 array.map()的方式渲染出來
一開始有直接嘗試將整個 props.children 丟出來，
然後得到的資料就是整個黏在一起，雖然樣式還在XD
看看 function childrenArr 的部分，
其實應該也蠻好懂的，就是用 props.children 的長度作為迴圈依據，
一個一個把資料塞進另一個陣列，
最後再將這個陣列渲染出來。
這個 demo 只是練習 children 的概念，
目前還沒感覺到這樣傳資料有什麼意義XD
參考文章
【React.js入門 – 10】 夾在中間的props: children
[筆記][React]用 for 迴圈處理Component