反應高階組件

Question

我正在研究高階函數，但我真的不明白這部分是如何工作的。

說我有以下功能：

const withAdminWarning = WrappedComponent => {
  return props => (
    <div>
      {props.isAdmin && <p>This is private info. Please dont share!</p>}
      <WrappedComponent {...props} />
    </div>
  );
};


const Info = props => (
  <div>
    <h1>Info</h1>
    <p>This info is: {props.info}</p>
  </div>
);

const AdminInfo = withAdminWarning(Info);

ReactDOM.render(
  <AdminInfo isAdmin={true} info="There are the details" />,
  document.getElementById("app")
);

根據我對組件的理解，要訪問 props 變量，您必須使用 props（如果它是無狀態組件）或 this.props（如果它是類組件）。

在上面的示例中，道具從哪里開始發揮作用，因為我無法從 WrappedComponent 或除了 return 語句之外的任何其他地方訪問它。

Answer 1

高階組件返回一個函數，它是一個函數組件。 我認為foo(Info)意味着withAdminWarning(Info)是否正確？

所以在調用withAdminInfo ， AdminInfo組件看起來基本上是這樣的：

const AdminInfo = props => (
    <div>
        {props.isAdmin && <p>This is private info. Please dont share!</p>}
        <div>
            <h1>Info</h1>
            <p>This info is: {props.info}</p>
        </div>
    </div>
);