在github上看react-native-on-layout的實(shí)現(xiàn)代碼時(shí)，發(fā)現(xiàn)它把this.props.children當(dāng)成一個(gè)函數(shù)使用姆蘸，當(dāng)時(shí)就奇怪了杈曲，我一直把this.props.children當(dāng)做是一個(gè)object夏块。然后去查了下官方文檔咬清，找到了相關(guān)的介紹，于是大概翻譯過(guò)來(lái)淑廊。
一般來(lái)說(shuō)this.props.children會(huì)是以下幾種類型
字符串
這是對(duì)于特定類型的component才有效，例如Text特咆，寫法也很簡(jiǎn)單
<Text>i'm props.children</Text>
JSX語(yǔ)法中In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children季惩，所以這個(gè)字符串其實(shí)就是props.children，只是我們一直沒注意到而已腻格。在這種情況下画拾，字符串的首末空格會(huì)被忽略，空行會(huì)被忽略菜职，換行符會(huì)被替換成空格青抛。
JSX Children
使用Component作為children，這是最常用的包含子節(jié)點(diǎn)的方法酬核。例如
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
當(dāng)然對(duì)于可以使用字符串作為children的特殊組件蜜另，是可以混合使用的，例如
<Text>123<Text>456</Text></Text>
原文中在這一段提到嫡意，一個(gè)component可以直接寫成組件數(shù)組的形式举瑰，而不用封裝在容器里，例如
render(){
return [<Text>1</Text>,<Text>2</Text>];
}
這個(gè)真的是有些震驚了蔬螟，如果我們r(jià)eturn一個(gè)非component對(duì)象此迅，實(shí)際上會(huì)直接報(bào)錯(cuò)。這里不同于我們平時(shí)寫的使用{}包起來(lái)的數(shù)組旧巾，后面會(huì)說(shuō)到耸序，那是使用代碼塊作為children。這里我猜測(cè)是JSX做了特殊處理而已鲁猩，如果返回?cái)?shù)組坎怪，則把每個(gè)元素解析成一個(gè)組件，我們?cè)趯?shí)際開發(fā)中還是應(yīng)該避免寫成這樣廓握。
表達(dá)式
這也是我們經(jīng)常使用的一種方式芋忿，用{}把表達(dá)式包圍起來(lái)，例如
<Text>123</Text>
<Text>{"123"}</Text>
是一樣的疾棵，所以如果想要Text顯示帶換行符的字符串戈钢，就可以這樣
<Text>{`123
456`}</Text>
然后就是我們最常用的方式，實(shí)現(xiàn)組件數(shù)組是尔，或者條件判斷顯示組件了殉了，例如
<View>
{
[1,2,3].map((item)=><Text>{item}</Text>)
}
{
Math.random() > 0.5 ? <Text>123</Text> : <Text>456</Text>
}
</View>
它可以和其他幾種類型混用，所以可以這么寫
<Text>
123
<Text>456</Text>
{[<Text>789</Text>,<Text>10</Text>]}
</Text>
當(dāng)然實(shí)際開發(fā)中我們會(huì)盡量把代碼結(jié)構(gòu)寫的工整一些拟枚。
函數(shù)
實(shí)際上props.children可以是任意類型薪铜，只是一般來(lái)說(shuō)我們會(huì)以上面三種形式來(lái)使用它众弓，但我們可以把它當(dāng)做一個(gè)函數(shù)來(lái)使用，只要最后能形成一個(gè)合法的可渲染的組件隔箍，例如我們實(shí)現(xiàn)一個(gè)自定義組件
class MyComponent{
render(){
let num = this.props.children(1);
return <Text>{num}</Text>
}
}
export default class Test extends Component{
render(){
return <MyComponent>
{
(num)=>num+1
}
</MyComponent>
}
}
這里我們?cè)谑褂肕yComponent時(shí)谓娃，包含在里面的是一個(gè)函數(shù)，所以在MyComponent的實(shí)現(xiàn)中通過(guò)this.props.children來(lái)調(diào)用這個(gè)函數(shù)蜒滩，react-native-on-layout這個(gè)庫(kù)就是這樣實(shí)現(xiàn)的滨达。
Booleans, Null, Undefined
true,false,null,undefined都是合法的，只是不渲染任何東西俯艰。我們經(jīng)常用這種方式來(lái)控制一個(gè)組件是否顯示捡遍，用的比較多的是null。 需要注意有的值雖然會(huì)被當(dāng)做false竹握，但不是bool值画株，所以會(huì)被渲染，例如數(shù)字0啦辐。然后就是如果想要渲染這些值谓传，應(yīng)該轉(zhuǎn)換成字符串。對(duì)下面的例子：
<Text>{false}</Text>
<Text>false</Text>
<Text>{"false"}</Text>
第一種情況沒有顯示芹关，后兩者情況是一樣的
更多內(nèi)容可以關(guān)注我的個(gè)人博客
