[React] Children 筆記
記錄一下最近用到關於 react children 的筆記，希望沒有記錯，之後有發現錯誤或新學到東西會再更新。
Intro
React 元件內有一個東西叫 children，代表該元件被給予的子元件，舉個例子：
const ChildA = ({ name }) => (
<h1>{`Hello ${name}`}</h1>
);
const Parent = () => (
<div style={somestyle}>
<Something />
<div>
{children}
</div>
<OtherThings />
</div>
);
const Container = () => (
<div>
<Parent>
<ChildA name={name}/>
</Parent>
</div>
);
可以看得出來在 render 時 Parent 會拿到 ChildA 並把它放在 {children} 這個位置。如果不使用的話，就變成要 Container 套 Parent 再套 ChildA 了，但這樣的話 Parent 就無法被很好的重覆利用，一但套的 ChildA 換成 ChildX 就變成要產生新的元件了。
Parent 如何給 Children Props?
前面例子，ChildA 拿到的 name 是直接從 Container 拿到的(這邊：<ChildA name={name}/>)，但如果我們有些事情是到了 Parent 這邊才確定的話，要如何傳給 ChildA 呢？
以下是我發現的解決方法，但感覺可能有更直接的：
Looping on Children Components
this.props.children 雖然是指子元件「們」，但並不是一個可以拿來用 map 一個一個拿出來的，所以 React 提供了一個方法叫 React.Children，可以透過 React.Children.map() 來一個一個將 children 取出使用。
從 Parent 提供 props
Parent 可以透過 React 提供的 React.cloneElement 來給予 children 所需的 props 或給予它 children。但既然叫 cloneElement 應該不難想像其實是像 ES6 的 Object.assign()：
ReactElement cloneElement(
ReactElement element,
[object props],
[children ...]
)
React.Children.map() 搭配 React.cloneElement
所以結合起來使用，就變成像這個例子，可以進行一些判斷並給予 props：
function renderChildren(props) {
return React.Children.map(props.children, child => {
if (child.type === RadioOption)
return React.cloneElement(child, {
name: props.name
})
else
return child
})
}