React-devtools: Nomes de componentes ausentes

OK, aqui está uma atualização rápida: se o componente for exposto assim, ele terá Unknown como nome:

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

No entanto, quando eu mudo para isso, ele começa a funcionar:

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

Eu verifiquei o código-fonte da extensão, mas não consigo descobrir o que é tagName e como está definido.

Se você não estiver usando JSX, precisará adicionar um atributo displayName à sua classe.

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

Se você estiver usando JSX, isso é feito automaticamente. Infelizmente, não há como fazer de outra forma.

Sim, estou usando JSX. Portanto, parece que é um problema diferente - o compilador JSX não pode contribuir com displayName se o componente for declarado com exports.ComponentName = React.createClass() .

Este é o código responsável por isso: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js#L37

O JSX poderia, em teoria, suportar o seu formato também. Este problema vai embora quando mudamos para as classes ES6 ou algo semelhante.

O tagName é algo que faz parte dos componentes DOM no núcleo do React. Não tem um displayName.

Se quiser enviar uma solicitação pull, você pode adicionar seus formatos preferidos aqui:

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

Compreendido, obrigado. O manual displayName funcionará por enquanto.

Acabei de fazer https://github.com/facebook/react/pull/799 que deve corrigir isso para todos os casos que eu consigo pensar.

Estou usando o plugin do Chrome React Developer Tools e quando inspeciono a árvore React, vejo 'Componente proxy' em vez do nome real do componente. Pode ser um problema de webpack ? Tentei adicionar 'displayName' e não funcionou.

Alguém mais teve esse problema?