javascript - react 高阶成分

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。

在上面的示例中， Prop 从哪里开始发挥作用，因为我无法从 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>
);