子供を反応させる方法

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

あなたはあなたが明示的にこのケースでのdisplayNameを定義する必要はありません

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

を使用することができます別の方法として。

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

Answer 2

はstaticである必要がありますので、undefinedです。

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

jsfiddle（コンソールを確認してください）