ReactJS - React.Children.forEach - 子コンポーネント名を取得できますか？

Question

私はReact（15.5.4）コンポーネントに多くの子要素があり、そのうちのいくつかはHTML要素であり、いくつかは他のReactコンポーネントです。

私はサーバーレンダリングを使用しており、サーバーとクライアントで同じ動作が必要です。クライアントはReactの実動ビルドを使用します。

私は子供を反復し、特定の種類のReactコンポーネントを特定する必要があります。だから私の最初の考えはReact.Children.forEach()を使って繰り返し、コンポーネント名を探すことでした。

React.Children.forEach(this.props.children, child => { 
    console.log('name =', child.name) 
}) 

child.nameとchild.displayNameが存在しないようです。

child.typeが存在し、"ul"のような文字列（Reactコンポーネント用）のいずれかです（HTML要素の場合）。

関数の場合、const type = get(child, 'type.name', '')のようにlodash/getを使用してコンポーネント名を取得できます。 しかし、これはサーバー側でのみ動作し、クライアント側のプロダクションビルドでは動作しません。文字列："t"が返されます。開発ビルドは関数のコンポーネント名を使用するように見えますが、プロダクションビルドではt()という名前に変更されています。だから私はchild.type.nameを使用することはできません。コンポーネントの子の上に

1. 反復とコンポーネントの特定のタイプを識別する..：

   はどのようにしていますか？

2. 開発と生産の両方で機能するReactビルド..？

Answer 1

コンポーネントの名前は、プロパティdisplayNameに設定できます。 ES6クラスを使用している場合は、displayNameという静的プロパティをコンポーネントのクラスに設定できます。次に、child.type.displayNameで子の名前を取得することができます。

const FirstChild = ({ name }) => <li>{name}</li>; 
 
FirstChild.displayName = 'FirstChild'; 
 

 
const SecondChild = ({ name }) => <li>{name}</li>; 
 
SecondChild.displayName = 'SecondChild'; 
 

 
class ThirdChild extends React.Component { 
 
    static displayName = 'ThirdChild'; 
 
    
 
    render() { 
 
    return (
 
     <li>{this.props.name}</li> 
 
    ); 
 
    } 
 
    
 
} 
 

 
class Parent extends React.Component { 
 
    componentDidMount() { 
 
    React.Children.forEach(this.props.children, child => { 
 
     console.log('name =', child.type.displayName); 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <ul>{this.props.children}</ul> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <Parent> 
 
     <FirstChild name='1st child value' /> 
 
     <SecondChild name='2nd child value' /> 
 
     <ThirdChild name='3rd child value' /> 
 
     </Parent> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>