我正在尝试制作我自己的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>
我console.log
从不返回“标签链接”,它总是返回undefined
,为什么?