Creating wrapper component

问题

I want to create a wrapper component like this:

Wrapper Component:

class WrapperComponent extends Component {

  render() {
    return (
      <Image source={someImage}>
          <App />
      </Image>);
  }
}

App:

class App extends Component {

  render() {
    return (
      <WrapperComponent>
        <Text>Some text</Text>
      </WrapperComponent>
  }
}

I want to use this for the default things like a background image. Is there a way to do this? Sorry I am new in this language.

回答1:

You can create the wrapper using props.children:

class WrapperComponent extends Component {

  render() {
    return (
      <Image source={someImage}>
          { this.props.children }
      </Image>);
  }
}

Whatever you'll put inside the <WrapperComponent></WrapperComponent> tags will be rendered.

来源：https://stackoverflow.com/questions/40111292/creating-wrapper-component