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 應該定義在它的用法之上。 但是，您可以隨意使用它，因為變量和函數會自動提升到 scope 的頂部。

3. 您可以這樣做，但它可能會在運行時導致錯誤。 如果您決定使用DisplayTheSecret組件而不用HOC包裝它。 Typescript通過在開發過程中生成類型來解決這些問題。

4. WrappedComponent由DisplayTheSecret和HOC組成。

Answer 2

DisplayTheSecret是一個簡單的組件，它希望在其屬性中找到secretToLife 。

withSecretToLife是一個 function 接受WrappedComponent並返回另一個組件（我們稱之為WrappingHOC ）

WrappingHOC返回WrappedComponent傳遞給withSecretToLife ，傳遞它自己的所有 props 並添加一個新的 - secretToLife

const WrappedComponent = withSecretToLife(DisplayTheSecret); - 這個也叫 WrappedComponent，但和上面的WrappedComponent （傳給函數的那個）不一樣，是WrappingHOC和DisplayTheSecret我們就叫它ResultingComponent

所以：

1. secretToLife是ResultingComponent傳遞給DisplayTheSecret的屬性

2. 順序很重要，在開始使用之前聲明 function 總是一個好主意

3. secretToLife是一個普通屬性，你在創建組件時聲明它

4. DisplayTheSecret沒有被導出，所以不能在模塊之外使用，除了它可以不用包裝就可以使用