React-devtools: Отсутствуют названия компонентов

Хорошо, вот быстрое обновление: если компонент представлен таким образом, у него будет Unknown в качестве имени:

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

Однако когда я меняю его на это, он начинает работать:

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

Я проверил исходный код расширения, но не могу понять, что такое tagName и как оно установлено.

Если вы не используете JSX, вам нужно добавить в свой класс атрибут displayName .

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

Если вы используете JSX, это делается автоматически. К сожалению, иначе получить это невозможно.

Да, я использую JSX. Итак, похоже, это другая проблема - компилятор JSX не может внести displayName если компонент объявлен с помощью exports.ComponentName = React.createClass() .

За это отвечает код: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js#L37

JSX теоретически может поддерживать и ваш формат. Эта проблема исчезнет, ​​когда мы перейдем к классам ES6 или чему-то подобному.

TagName - это то, что является частью компонентов DOM в ядре React. У него нет displayName.

Если вы хотите отправить запрос на перенос, вы можете добавить здесь свои предпочтительные форматы:

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

Разобрался, спасибо. Ручной displayName пока работает.

Только что сделал https://github.com/facebook/react/pull/799, который должен исправить это для всех случаев, которые я могу придумать.

Я использую Chrome-плагин React Developer Tools и когда я проверяю дерево React, я вижу «Прокси-компонент» вместо фактического имени компонентов. Может быть проблема webpack ? Я попытался добавить displayName, но этого не произошло.

Кто-нибудь еще сталкивался с этой проблемой?