react-native - 创建包装组件

Question

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

包装组件:

class WrapperComponent extends Component {

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

应用程序:

class App extends Component {

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

我想将它用于默认的东西，比如背景图片。有没有办法做到这一点？对不起，我是这种语言的新手。

Answer 1

您可以使用 props.children 创建包装器

功能组件

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

类组件

class WrapperComponent extends Component {

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

无论您在 <WrapperComponent></WrapperComponent> 中放入什么标签将被呈现。