反应HOC和访问道具

Question

我试图理解下面的反应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. 如果它“DisplayTheCret”访问道具“secretToLife”或WrappedComponent？正确看待这一问题的方法是什么？
2. “const WrappedComponent=withSecretToLife（displaytescret）；”行位于“const displaytescret=props”行之后=

Answer 1

DisplayTheSecret是一个简单的组件，它期望在其属性中找到秘书ToLife。

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

WrappingHOC返回WrappedComponent通过secretToLife传递给的WrappedComponent，传递它自己的所有道具并添加一个新道具-secretToLife

const WrapmpingComponent=with SecreToLife（DisplayTheSecret）；-这个也叫WrappeComponent，但是它和上面的WrappeComponent不一样（传递给函数的那个），它是WrappingHOCwithDisplayTheSecret让我们调用它结果组件

因此：

>

secretToLife是由ResultingComponent传递给displaythecret

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

是一个普通的属性，当你创建一个组件时声明它

DisplayTheSecret没有导出，因此不能在模块之外使用，除了它可以在没有包装的情况下使用

Answer 2

>

创建一个新的组件-WrappeComponent。它获得了道具秘书生活。DisplayTheSecret本身没有秘书生活道具。

在一般实践中，您应该使用上面已经定义的变量。因此，DisplayTheCret应该在其用法之上定义。但是，您可以随意使用它，因为变量和函数会自动提升到作用域的顶部。

您可以这样做，但在运行时可能会导致错误。如果您决定使用显示Cret组件，而不使用HOC包装它Typescript通过在开发过程中生成打字来解决这些问题。

它由DisplayTheSecret和HOC组成。