Children 與組合

經(jīng)測(cè)試，由于微信小程序的  無(wú)法在循環(huán)中使用，因此 Children 和組合在微信小程序中也無(wú)法在循環(huán)中使用。百度小程序、支付寶小程序、H5、React Native 都可以在循環(huán)中使用此功能。

Children

在我們?cè)O(shè)計(jì)組件時(shí)，有些組件通常不知道自己的子組件會(huì)有什么內(nèi)容，例如 Sidebar 和 Dialog 這樣的容器組件。

我們建議在這樣的情況使用 this.props.children 來(lái)傳遞子元素：

class Dialog extends Component {
  render () {
    return (
      <View className='dialog'>
        <View className='header'>Welcome!</View>
        <View className='body'>
          {this.props.children}
        </View>
        <View className='footer'>-- divider --</View>
      </View>
    )
  }
}

這樣就能允許其它組件在 JSX 中嵌套任意子組件傳遞給 Dialog:

class App extends Component {
  render () {
    return (
      <View className='container'>
        <Dialog>
          <View className="dialog-message">
            Thank you for using Taro.
          </View>
        </Dialog>
      </View>
    )
  }
}

在 <Dialog /> JSX 標(biāo)簽內(nèi)的任何內(nèi)容都會(huì)作為它的子元素(Children)都會(huì)傳遞到它的組件。

注意事項(xiàng)

請(qǐng)不要對(duì) this.props.children 進(jìn)行任何操作。Taro 在小程序中實(shí)現(xiàn)這個(gè)功能使用的是小程序的 slot 功能，也就是說(shuō)你可以把 this.props.children 理解為 slot 的語(yǔ)法糖，this.props.children 在 Taro 中并不是 React 的 ReactElement 對(duì)象，因此形如 this.props.children && this.props.children、this.props.children[0] 在 Taro 中都是非法的。

this.props.children 無(wú)法用 defaultProps 設(shè)置默認(rèn)內(nèi)容。由于小程序的限制，Taro 也無(wú)法知道組件的消費(fèi)者是否傳入內(nèi)容，所以無(wú)法應(yīng)用默認(rèn)內(nèi)容。

不能把 this.props.children 分解為變量再使用。由于普通的 props 有一個(gè)確切的值，所以當(dāng)你把它們分解為變量運(yùn)行時(shí)可以處理，this.props.children 則不能這樣操作，你必須顯性地把 this.props.children 全部都寫(xiě)完整才能實(shí)現(xiàn)它的功能。

組合

自 1.1.9 開(kāi)始支持

有些情況你不僅僅需要只傳遞一個(gè)子組件，可能會(huì)需要很多個(gè)「占位符」。例如在這個(gè) Dialog 組件中，你不僅需要自定義它的 body，你希望它的 header 和 footer 都是給 Dialog 組件的使用者自由定制。這種情況可以這樣做：

class Dialog extends Component {
  render () {
    return (
      <View className='dialog'>
        <View className='header'>
          {this.props.renderHeader}
        </View>
        <View className='body'>
          {this.props.children}
        </View>
        <View className='footer'>
          {this.props.renderFooter}
        </View>
      </View>
    )
  }
}

class App extends Component {
  render () {
    return (
      <View className='container'>
        <Dialog
          renderHeader={
            <View className='welcome-message'>Welcome!</View>
          }
          renderFooter={
            <Button className='close'>Close</Button>
          }
        >
          <View className="dialog-message">
            Thank you for using Taro.
          </View>
        </Dialog>
      </View>
    )
  }
}

在我們聲明 Dialog 組件時(shí)，header 和 footer 部分我們分別增加了 this.props.renderHeader 和 this.props.renderFooter 作為占位符。相應(yīng)地，我們?cè)谑褂?nbsp;Dialog 組件時(shí)，就可以給 renderHeader 和 renderFooter 傳入 JSX 元素，這兩個(gè)分別傳入的 JSX 元素將會(huì)填充它們?cè)?nbsp;Dialog 組件中的位置——就像在 Dialog JSX 標(biāo)簽里寫(xiě)入的內(nèi)容，會(huì)填充到 this.props.children 的位置一樣。

注意事項(xiàng)

組件的組合需要遵守 this.props.children 的所有規(guī)則。組合這個(gè)功能和 this.props.children 一樣是通過(guò) slot 實(shí)現(xiàn)的，也就是說(shuō) this.props.children 的限制對(duì)于組件組合也都同樣適用。

所有組合都必須用 render 開(kāi)頭，且遵守駝峰式命名法。和我們的事件規(guī)范以 on 開(kāi)頭一樣，組件組合使用 render 開(kāi)頭。

組合只能傳入單個(gè) JSX 元素，不能傳入其它任何類(lèi)型。當(dāng)你需要進(jìn)行一些條件判斷或復(fù)雜邏輯操作的時(shí)候，可以使用一個(gè) Block 元素包裹住，然后在 Block 元素的里面填充其它復(fù)雜的邏輯。