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 = foo(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>
);

反应更高阶的成分

1 个答案: