React HOC 和访问道具

Question

我正在尝试理解下面的 React HOC；

const withSecretToLife = (WrappedComponent) => {
  class HOC extends React.Component {
    render() {
      return (
        <WrappedComponent
          {...this.props}
          secretToLife={42}
        />
      );
    }
  }
    
  return HOC;
};

export default withSecretToLife;

下面是另一个组件；

import withSecretToLife from 'components/withSecretToLife';

const DisplayTheSecret = props => (
  <div>
    The secret to life is {props.secretToLife}.
  </div>
);

const WrappedComponent = withSecretToLife(DisplayTheSecret);

export default WrappedComponent;

特别是我想了解

1. 如果它是“DisplayTheSecret”，它可以访问道具“secretToLife”或 WrappedComponent？看待这个 HOC 的正确方法是什么？
2. “const WrappedComponent = withSecretToLife(DisplayTheSecret);”这一行在“const DisplayTheSecret = props => ()”行之后。这是一个标准模式吗？重要吗？
3. 与上述问题相关，我们如何才能在我们拥有“props.secretToLife”之前 声明/定义。对于 WrappedComponent 即 const WrappedComponent = withSecretToLife(DisplayTheSecret);
4. 在上述情况下，App.js 中实际消耗/使用的内容，即 <WrappedComponent /> 或 <DisplayTheSecret /> 或其中任何一个都可以使用？

Answer 1

1. 您创建了一个新组件 - WrappedComponent。它得到了道具 secretToLife。 DisplayTheSecret 本身没有 secretToLife 属性。

2. 在一般实践中，您应该使用已经存在的变量 定义如上。所以 DisplayTheSecret 应该定义在它的上面 用法。但是，您可以随心所欲地使用它，因为变量和函数会自动提升到作用域的顶部。

3. 您可以这样做，但可能会导致运行时出错。如果 你决定使用DisplayTheSecret 组件而不包装它 与HOC。 Typescript 通过生成类型来解决这些问题 在开发过程中。

4. WrappedComponent由DisplayTheSecret和HOC组成。

Answer 2

DisplayTheSecret 是一个简单的组件，它希望在其属性中找到secretToLife。

withSecretToLife 是一个接受WrappedComponent 并返回另一个组件的函数（我们称之为WrappingHOC）

WrappingHOC 返回 WrappedComponent 传递给 withSecretToLife，传递它自己的所有 props 并添加一个新的 - secretToLife

const WrappedComponent = withSecretToLife(DisplayTheSecret);——这个也叫WrappedComponent，但和上面的WrappedComponent（传递给函数的那个​​）不一样，是WrappingHOC和DisplayTheSecret我们叫ResultingComponent

所以：

1. secretToLife 是由ResultingComponent 传递给DisplayTheSecret 的属性

2. 顺序很重要，在开始使用之前声明一个函数总是一个好主意

3. secretToLife是一个普通属性，你在创建组件时声明它

4. DisplayTheSecret 没有被导出，所以不能在模块外使用，除了可以不包装使用