类型检查反应儿童

Question

题

如何确认通过道具(children例如)收到的反应元素在我的渲染方法中是否为给定类型？

例:

说我有一个List元素和一个ListItem元素.在渲染方法中List,我想寻找所有被传递的孩子,并对任何孩子做一些特别的事情ListItem.

我确实找到了一个有效的实现,但只有经过反复试验才能实现.请参阅下面的代码.(React 15.4.2)

List.jsx

import ListItem from 'list-item';

...

React.Children.map(children, child => {
  console.log(child);     // function ListItem() { ... }
  console.log(ListItem);  // function ListItem() { ... }

  if (isListItem(child)) {
    return (...);
  }
  return child;
})

// this implementation does not work
isListItem(element) {
  return (element.type === ListItem);
}

// this implementation does work, but might break if I'm using something like uglify or if I use `react-redux` and `connect()` ListItem (as that will change the display name)
isListItem(element) {
  return (element.type.displayName === 'ListItem');
}

// this implementation does work
isListItem(element) {
  return (element.type === (<ListItem />).type);
}

ListItem.jsx

class ListItem expends React.component {
  ...
}

export default ListItem;

所以,最后的实现似乎有效,但为什么第一个实现不起作用？我在反应文档中找不到与此相关的任何材料,尽管我确实发现了一些关于同一事物的堆栈溢出问题.但是,这些问题中提供的答案表明第一个实现应该有效(尽管它们适用于旧版本的React)

相关链接

• 只允许反应组件中特定类型的子项

• 比较两个组件 - 组件X是组件A的实例

Answer 1

虽然这个问题很老了，但我在使用时遇到了这个问题react-hot-loader，并花了一段时间才终于找到这个 GitHub 问题，解释了为什么它会这样。

这是有意的，react-hot-loader@3 补丁React.createElement(<ImportedComponent />)相当于React.createElement(ImportedComponent)它返回组件的代理包装器元素而不是原始组件，这是允许在不卸载的情况下替换组件上的方法的一部分。

- @nfcampos

除了您发现的方法之外，RHL 现在还提供了一个areComponentsEqual()函数，并在其 README 中提供了专门的部分。

import { areComponentsEqual } from 'react-hot-loader'

const element = <Component />
areComponentsEqual(element.type, Component) // true