为什么我不能在React中使用HOC？

Question

我有这个HOC，为了清楚起见，我省略了代码：

const TestWrapper = (Component) => {
  return function() {
    return <Component />
  }
}

这就是这样称呼的：

const b = <Breadcrumbs items={ crumbs } />

const ConnectedAppHeader = TestWrapper(b);

return (
   <div>
     <ConnectedAppHeader />
   </div>
)

我有一个名为Breadcrumbs的组件，它采用了道具。如果我将它与<Breadcrumbs items={ crumbs } />一起使用，则运行正常。但是一旦我尝试将其包装在TestWrapper中，我就会收到此错误：

  

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

显然我的渲染类型错了，但我被卡住了。我如何让这个HOC工作？

Answer 1

HOC期望组件函数作为参数 - 而不是组件函数的实际实例。当您应该传递 Breadcrumbs函数/类本身时，您尝试传递Breadcrumbs元素。这是因为你在TestWrapper中创建了一个新元素 - 你不能从元素中创建一个元素，你必须从实际的类或函数中创建一个元素。

例如，您可以修改包装器以使其成为：

const TestWrapper = (Component, items) => {
  return function() {
    return <Component items={items} />
  }
}

然后像这样使用它：

const ConnectedAppHeader = TestWrapper(Breadcrumbs, crumbs);