创建包装组件答案

【问题标题】：Creating wrapper component创建包装组件
【发布时间】：2016-10-18 14:43:05
【问题描述】：

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

包装组件：

class WrapperComponent extends Component {

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

应用：

class App extends Component {

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

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

【问题讨论】：

看看this链接

标签： react-native redux

【解决方案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> 标签中添加什么，都会被渲染。

【讨论】：

每当我推送另一个屏幕时，它都会重新渲染并再次加载。我将修复所有视图。像 iOS 容器视图。在本机反应中是可能的。
@KiritModi - 你能解释更多（甚至打开一个新问题）吗？
是的，我想修复与所有视图相同的顶视图。所以我为 TopView 创建了高阶组件。但是当它每次都重新渲染时。我要修复（不重新渲染）
你可以使用 shouldComponentUpdate 或 React.memo。如果你提出一个新问题会更好。

【解决方案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>

【讨论】：