获取反应元素字符串类型答案

【问题标题】：Get react element string type获取反应元素字符串类型
【发布时间】：2015-09-24 04:14:53
【问题描述】：

如果我有一个呈现以下内容的组件：

<div>
  <Example/>
  <span>hi</span>
</div>

属性this.props.children 将是一个包含两个元素的数组。当循环 child.type 仅适用于 span 以返回字符串 span 时，有什么属性可以为我提供字符串 Example 作为反应元素？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果组件类有显示名称，您应该可以使用child.type.displayName。 This example 演示。

【讨论】：

JSX 使用变量名自动填充这个字段，所以在大多数情况下应该设置它，谢谢！ :)

【解决方案2】：

无论是原生 DOM 元素还是 ReactElement，都可以使用它来获取字符串。

function getStringType (node) {
  if (typeof node.type === 'string') return node.type
  if (node.type && node.type.displayName) return node.type.displayName
  return false
}

【讨论】：

也许第 3 行和第 4 行可以替换为 "return node.type && node.type.displayName" 这也将处理您返回的显式错误语句以获得一致的返回。无法建议编辑，因为编辑队列已满