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存在，它可以是一个字符串（对于HTML元素），也可以是"ul"一个函数（对于React组件）。

当它是一个函数时，我可以lodash/get像这样使用const type = get(child, 'type.name', '')以获取组件名称。 但是
，这似乎只能在服务器上运行，而不能在客户端生产版本（返回字符串：）中使用"t"。看起来开发版本使用我的组件名称作为该功能，但是生产版本将其重命名为t()。所以我不能使用child.type.name。

我如何：

1. 遍历组件子项并标识组件的特定类型。
2. 在React构建的开发和生产中哪个起作用？

Answer 1

您可以在属性中设置组件的名称displayName。如果您使用的是ES6类，则可以设置一个称为displayNamecomponent的类的静态属性。然后，您将可以通过获得子名称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>