我有一个包含许多子项的 React (15.5.4) 组件,其中一些是 HTML 元素,一些是其他 React 组件。
我正在使用服务器渲染并且需要在服务器和客户端上有相同的行为。客户端将使用 React 的生产构建。
我需要遍历子组件并确定特定类型的 React 组件。所以我的第一个想法是使用 React.Children.forEach()
进行迭代并查找组件名称。
React.Children.forEach(this.props.children, child => {
console.log('name =', child.name)
})
似乎 child.name
和 child.displayName
不存在。
现在, child.type
存在,并且是一个字符串(对于 HTML 元素),如 "ul"
或一个函数(对于 React 组件)。
当它是一个函数时,我可以使用 lodash/get
像这样 const type = get(child, 'type.name', '')
来获取组件名称。 但是,这似乎只适用于服务器,而不适用于客户端生产版本,它返回一个字符串: "t"
。看起来开发版本使用我的组件名称作为函数,但生产版本将其重命名为 t()
。所以我不能使用 child.type.name
。
我如何能:
- 遍历子组件并识别特定类型的组件..?
- 哪个适用于开发和生产 React 构建..?
原文由 Stephen Last 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以在属性中设置组件的名称
displayName
。如果您使用的是 ES6 类,则可以将名为displayName
的静态属性设置到组件的类中。然后,您将能够使用child.type.displayName
获得孩子的名字。