React-devtools: Faltan nombres de componentes

Bien, aquí hay una actualización rápida: si el componente se expone así, tendrá Unknown como nombre:

exports.MyComponent = React.createClass({...});

Sin embargo, cuando lo cambio a esto, comienza a funcionar:

var MyComponent = React.createClass({...});
exports.MyComponent = MyComponent;

Revisé el código fuente de la extensión, pero no puedo averiguar qué es tagName y cómo está configurado.

Si no está utilizando JSX, debe agregar un atributo displayName a su clase.

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  ...
});

Si está utilizando JSX, esto se hace automáticamente. Desafortunadamente, no hay forma de obtenerlo de otra manera.

Sí, estoy usando JSX. Entonces, parece que es un problema diferente: el compilador JSX no puede contribuir displayName si el componente se declara con exports.ComponentName = React.createClass() .

Este es el código responsable: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js#L37

JSX, en teoría, también podría admitir su formato. Sin embargo, este problema desaparecerá cuando pasamos a las clases de ES6 o algo similar.

El tagName es algo que forma parte de los componentes DOM en el núcleo de React. No tiene un displayName.

Si desea enviar una solicitud de extracción, puede agregar sus formatos preferidos aquí:

https://github.com/facebook/react/blob/ab47e992155ec9c2455b02bf671e8dd92bd01055/vendor/fbtransform/transforms/reactDisplayName.js#L37 -L51

Entendido, gracias. El displayName manual funcionará por ahora.

Acabo de hacer https://github.com/facebook/react/pull/799, lo que debería solucionar esto para todos los casos que se me ocurran.

Estoy usando el complemento de Chrome React Developer Tools y cuando inspecciono el árbol de React veo 'Componente de proxy' en lugar del nombre real de los componentes. ¿Podría ser un problema de webpack ? Intenté agregar 'displayName' y no fue así.

Alguien mas se encuentra con este problema?