如何在 this.props.children 中访问 React 对象的类名

Question

In a react component render method that has some children components in this.props.children. How can I get the component (class) name of each child to differentiate between them?

React.Children.map(this.props.children, function(child){
    // how can I get the class name of a child or some other identifier
})

Answer 1

Warning: this will not work in production if using minification

In ES6 every function has its name stored in property function.name so you can get Class name with

import React from 'react'

...

getNameOfChildrenClass() {
    const singleChild = React.children.only(this.props.children),
          childClass = child.type

    return childClass.name        
}

I'm using React.children utility

Answer 2

The same as @Vaclav, but if you are using redux connect you will get "Connect" as name which may cause problems. Here is my improved version:

let{ name, displayName=name } = child.type;
React.cloneElement(child, {
  ...
  key:displayName,
});

Answer 3

I think what you want is child._currentElement.type.displayName but I would be careful about using internals like this, unless you want to double check they still function correctly in every upgrade. I don't think there is a public api for getting the name of a component.