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：

创建包装器

class WrapperComponent extends Component {

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

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

Answer 2

根据官方文档“合成与继承”，不建议使用继承方法。因此，您可以使用以下内容创建AwesomeWrapper.js：

import React from 'react';
import { Image } from 'react-native'; 

export const AwesomeWrapper = (props) => {
  return (
    <Image source={props.imageSource}>
      {props.children}
    </Image>
  );
}

，然后在您的代码中使用

    <AwesomeWrapper imageSource="...">
       ...
    </AwesomeWrapper>

创建包装器组件

2 个答案: