类型检查对子项的反应

Question

我如何确认通过props（例如子元素）接收的反应html" target="_blank">元素在我的渲染方法中属于给定类型？

假设我有一个列表元素和一个列表项元素。在List的render方法中，我想查找传递的所有子项，并对ListItems中的任何子项执行一些特殊的操作。

我确实找到了一个可行的实现，但只是在反复试验之后。请参阅下面的代码。（第15.4.2节）

我ist.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);
}

名单我tem.jsx

class ListItem expends React.component {
  ...
}

export default ListItem;

所以，最后一个实现似乎可以工作，但是为什么第一个实现不能工作呢？我在react文档中找不到任何与此相关的资料，尽管我确实发现了一些关于相同内容的堆栈溢出问题。但是，这些问题中提供的答案表明，第一个实现应该可以工作（尽管它们适用于旧版本的React）

>

在反应组件中只允许特定类型的子级

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

Answer 1

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

这是预期的，react-hot-loader@3补丁React.create元素（

-@nfcampos

除了您发现的方法之外，RHL现在还提供了一个areComponentsEqual（）函数，在其自述文件中有一个专用部分。

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

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