Question

我编写了一个组件，它将子组件作为其他组件并传递给他们额外的道具。在我的组件的render方法中，我有这样的代码

React.Children.forEach(children, child => {
  if (child.type === DataTableHeader)) {
    header = React.cloneElement(child, {
      filter, onFilterChange,
      sort, onSortChange
    })
  }
})

其中DataTableHeader是另一个组件。

问题是child.type永远不会等于DataTableHeader。

在Chrome调试器中，我看到child.type引用DataTableHeader来自此处

(function(factory,instantiate
/**/) {
return function DataTableHeader() {
         return instantiate(factory, this, arguments);
      }
})

而DataTableHeader指向我的组件。

render方法来自DataTable组件，我这样使用它：

<DataTable
  onFetchData={onFetchData}>
  <DataTableHeader>
    <DataTableHeaderCell sortField='name'>
      Name
    </DataTableHeaderCell>
  </DataTableHeader>
  {children}
</DataTable>

Answer 1

问题是由react-hot-loader https://github.com/gaearon/react-hot-loader/issues/304引起的作为一种解决方法，我在DataTableHeader上定义静态字段并使用它而不是比较类型type

如何检查子代组件的类型

1 个答案: