我正在尝试做我自己的Tabs
组件,以便我可以在我的应用程序中使用选项卡。然而,我似乎在尝试按类型提取我需要的子组件时遇到问题。
import React from 'react'
export class Tabs extends React.Component {
render() {
let children = this.props.children
let tablinks = React.Children.map(children, x => {
console.log(x.type.displayName) // Always undefined
if (x.type.displayName == 'Tab Link') {
return x
}
})
return (
<div className="tabs"></div>
)
}
}
export class TabLink extends React.Component {
constructor(props) {
super(props)
this.displayName = 'Tab Link'
}
render() {
return (
<div className="tab-link"></div>
)
}
}
<Tabs>
<TabLink path="tab1">Test</TabLink>
<TabLink path="tab2">Test2</TabLink>
</Tabs>
My console.log
永远不会返回“Tab Link”,它总是返回undefined
, why?
作为替代方案,你可以使用
console.log(x.type.name) // this would be 'TabLink'
在这种情况下,您不需要显式定义 displayName。
https://jsfiddle.net/lustoykov/u1twznw7/1/ https://jsfiddle.net/lustoykov/u1twznw7/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)