Searching for React elements

When your application gets bigger, traversing elements on the page or in the element tree in the React Developer Tools panel doesn't work so well. You need a way to search for React elements. Luckily, there's a search box located right above the element tree:

As you type in the search box, elements are filtered in the element tree below. As you can see, the matching text is also highlighted. The search only matches against the name of the element, which means that searching will not help you if you need to filter down from 100 of the same type of element. However, even in these cases, searching can remove everything else in the app, so that you have a smaller list to manually go through.

If you select the Highlight Search checkbox, searching will highlight React elements in the main browser window:

Both React elements (<MyContainer> and <MyChild>) on this page are highlighted because they both match the search criteria, my. Let's see what happens when you search for child instead:

This time, you can see the only React element that matches your search. It's highlighted in the main browser window and in the element tree. By searching like this, you know exactly what element on the screen you're working with when you select it in the element tree.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.216.123.120