Как вы проверяете реквизит элемента реакции и состояние в консоли?

React Developer Tools дают много возможностей для проверки дерева компонентов React и просмотра реквизитов, обработчиков событий и т.д. Однако, что мне действительно понравилось бы сделать это, чтобы проверить эти структуры данных в консоли браузера.

В chrome я могу играть с выбранным в данный момент элементом DOM в консоли, используя $0. Есть ли способ извлечь информацию о компоненте React из $0, или можно сделать что-то подобное с инструментами React Dev?

Ответ 1

Ответ на ваш вопрос можно найти здесь по аналогичному вопросу, который я задал: React - получение компонента из элемента DOM для отладки

Я предоставляю ответ здесь, потому что у меня нет необходимых точек репутации, чтобы отмечать их как дубликаты или комментарии выше.

В принципе, это возможно, если вы используете конструкцию разработки, потому что вы можете использовать TestUtils для достижения своей цели.

Вам нужно сделать только две вещи:

Статически сохраните компонент корневого уровня, полученный из React.render().
Создайте глобальную вспомогательную функцию отладки, которую вы можете использовать в консоли с помощью $0, которая обращается к вашему статическому компоненту.

Таким образом, код в консоли может выглядеть примерно так:

> getComponent($0).props

Реализация getComponent может использовать React.addons.TestUtils.findAllInRenderedTree для поиска соответствия путем вызова getDOMNode для всех найденных компонентов и сопоставления с переданным элементом.

Ответ 2

Назначьте состояние или объект поддержки объекту window:

window.title = this.state.title

И затем из консоли инструментов dev вы можете попробовать различные методы для объекта, который был выставлен, например:

window.title.length

-