2

我是 React 的新手，仍在努力理解 HOC。

我们知道：

HOC 是一个函数，它接受一个组件并返回一个新组件，该组件环绕它以提供附加功能。

例如：

export function ProFeature(FeatureComponent) {
    return function(props) {
       if (props.pro) {
          let { pro, ...childProps} = props;
          return <FeatureComponent {...childProps} />
       } else {
         return (
            <h5 className="bg-warning text-white text-center">
                This is a Pro Feature
           </h5>
         )
      }
    }
}

所以 ProFeature 是一个 HOC。

但是要调用一个东西成为一个组件，它需要直接渲染内容。例如，对于名为 customComponent 的无状态组件，我们应该能够通过以下方式呈现其内容：

<CustomComponent />

但我们不能在 HOC 上这样做：

<ProFeature />   //invalid

相反，我们需要做：

let Abc = ProFeature(CustomComponent);

然后

<Abc/>

所以 HOC 不是一个组件？如果不是组件，为什么叫高阶组件？它不应该被称为高阶函数等吗？

4

1 回答 1

0

“所以 HOC 不是组件？” - 不，为什么要这样？正如 React 文档所述：

“具体来说，高阶组件是一个接受一个组件并返回一个新组件的函数。”

" let abc = ProFeature(customComponent);" - 它仍然不起作用，因为 HOC 是一个柯里化函数，你必须再次调用它才能返回一个组件。

" <abc />" - 仍然无法工作，因为组件名称必须大写：

const Abc = ProFeature(props)(customComponent);
<Abc />
于 2019-11-22T01:50:54.043 回答