Children with combination

For test, as a result of WeChat applet <slot /> can't be used in a loop, so Children and combination in WeChat mini-app, you cannot use this in a loop. Baidu mini-apps, pay treasure to mini-apps, H5, React Native can use this feature in the loop.

Children

When we design components, some components are usually don't know what will your child components content, such as Sidebar and Dialog such container components.

We suggest that in such a situation using this.props.children child elements to convey:

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>
    )
  }
}

So you can allow other components in the JSX passed to anyon nested components Dialog:

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

In <Dialog /> JSX any content within the tag as its child elements (Children) will be passed to its components.

announcements

Please don't take this.props.children for any operation. Taro in a mini-app to realize the function using a mini-app slot function, that is to say, you can put the this.props.children understood as slot syntactic sugar, this.props.children not React in the Taro ReactElement object, So like this.props.children && this.props.children、this.props.children[0] is illegal in Taro.

this.props.children can't use defaultProps set the default content. Due to the limitation of mini-apps, Taro cannot know whether consumers of the component content of the incoming, so can't apply the default content.

Cannot put this.props.children decomposition as a variable to use again. Because ordinary props has a definite value, so when you put them into the variable runtime can handle, this.props.children can not do this operation, you must explicitly this.props.children all write full to achieve its function.

combination

Since the 1.1.9 began to support

In some cases you just need to deliver a child only component, may need a lot of a "placeholder". For example in the Dialog component, you not only need to custom it body, you hope it header and footer are to Dialog component user customization. This kind of situation can do it:

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>
    )
  }
}

In our statement Dialog component, header and footer part increased our this.props.renderHeader and this.props.renderFooter as a placeholder. Accordingly, we use Dialog component, can give renderHeader and renderFooter incoming JSX elements, respectively the two incoming JSX elements will populate them in Dialog components in place - just like in Dialog JSX written content in the label, will fill to this.props.children position.

announcements

The combination of components to follow this.props.children all rules. Combine this function and this.props.children by slot, i.e. this.props.children limit are also apply for a component combinations.

All the combination must use render beginning, and follow the camel nomenclature. And our event specification to on beginning, component combination render beginning.

Portfolios are introduced into a single JSX elements, can't spread to any other type. When you need to do some condition judgment or complex logic operation, can use a Block wrapped in elements, and then in Block filling other complex logic elements.