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永远不会返回“标签链接”，它总是返回undefined，为什么？

Answer 1

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

<uses-permission android:name="android.permission.DEVICE_POWER" />

在这种情况下，您无需显式定义displayName。

action(s)

Answer 2

/* FLUID HEIGHT LAYOUT FOR ADSENSE */ /* FLUID HEIGHT LAYOUT FOR ADSENSE */ #adsenselistingadvert { margin-left:auto; margin-right:auto; max-height:100%; border:2px solid blue; } #adsenselisting { display: inline-block; width:100%; max-width:100%; padding-top: 12px; padding-bottom: 12px; border:2px solid red; } @media only screen and (min-width : 1px) { #adsenselisting, #adsenselistingadvert { height:100px } } @media only screen and (min-width : 320px) { #adsenselisting, #adsenselistingadvert { height:130px } } @media only screen and (min-width : 480px) { #adsenselisting, #adsenselistingadvert { height:130px } } @media only screen and (min-width : 640px) { #adsenselisting, #adsenselistingadvert { height:160px } } @media only screen and (min-width : 720px) { #adsenselisting, #adsenselistingadvert { height:200px} } @media only screen and (min-width : 960px) { #adsenselisting, #adsenselistingadvert { height:200px } }因为undefined应该是displayName属性。

static

jsfiddle（检查控制台）

Answer 3

您可以使用已经定义的name属性：

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

为了更好的维护，我建议使用TabLink.name而不是'TabLink'字符串。

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

如何让孩子输入反应

3 个答案: