创建包装组件 [英] Creating wrapper component

问题描述

我想创建一个这样的包装器组件:

I want to create a wrapper component like this:

包装组件:

class WrapperComponent extends Component {

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

应用:

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.

推荐答案

您可以使用 props.children

const WrapperComponent = ({ children }) => (
  <Image source={someImage}>
    {children}
  </Image>
);

类组件

class WrapperComponent extends Component {

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

无论你在 </WrapperComponent> 标签中放入什么，都会被渲染.

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

这篇关于创建包装组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！