您可以在属性中设置组件的名称
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>
