如何让孩子输入反应

Question

我正在尝试制作自己的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永远不会返回"Tab Link",它总会返回undefined,为什么？

Answer 1

作为替代方案,您可以使用

console.log(x.type.name) // this would be 'TabLink'

在这种情况下,您无需显式定义displayName.

https://jsfiddle.net/lustoykov/u1twznw7/1/