如何让孩子们打字

Question

我试图使我自己的选项卡组件，以便我可以在我的应用程序中使用选项卡。然而，我似乎有问题，试图提取我需要的类型的子组件。

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>

我的控制台。日志从不返回“选项卡链接”，它总是返回未定义的，为什么？

Answer 1

您可以使用已定义的名称属性：

if (x.type.name === TabLink.name) {
    return x
}

我建议使用TabLink。名称而不是'TabLink'字符串，以便更好地维护。

见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Answer 2

它是未定义的，因为displayName应该是静态属性。

class TabLink extends React.Component { 
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className="tab-link"></div>
    )
  }
} 
TabLink.displayName = 'Tab Link'

JSFIDLE（检查控制台）

Answer 3

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

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

在这种情况下，不需要显式定义displayName。

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