Как вы проверяете реквизит и состояние реагирующего элемента в консоли?

Question

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

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

Answer 1

Ответ на ваш вопрос можно найти здесь подобный вопрос, я спросил: React - getting a component from a DOM element for debugging

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

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

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

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

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

> getComponent($0).props 

Реализация GetComponent может использовать React.addons.TestUtils.findAllInRenderedTree для поиска матча по телефону getDOMNode на все обнаруженные компонентах и ​​согласовании против переданного в элементе ,

Answer 2

Назначают состояние или проп объект в окне объекта:

window.title = this.state.title 

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

window.title.length