如何讓兒童輸入反應

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

作爲替代，你可以使用

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

你不需要在這種情況下明確定義顯示名。

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

Answer 2

這是undefined，因爲displayName應該是static屬性。

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

jsfiddle（檢查控制檯）