react 渲染道具_如何在浏览器中查看您的React状态和道具

react 渲染道具

by Andrew Bales

通过安德鲁·巴尔斯

如何在浏览器中查看您的React状态和道具 (How to see your React state & props in the browser)

If you’re building a web app with React, you may want to see the state or props of components in real-time. Here’s a quick solution for Chrome & FireFox!

如果您要使用React构建Web应用程序，则可能需要实时查看组件的状态或属性。 这是Chrome和FireFox的快速解决方案！

React开发人员工具 (React Developer Tools)

Install the React Developer Tools extension for Chrome or FireFox. It allows you to inspect React component hierarchies within the developer tools — the same way you would peek at the DOM elements, console, or network.

安装适用于Chrome或FireFox的React Developer Tools扩展。 它允许您检查开发人员工具中的React组件层次结构—就像查看DOM元素，控制台或网络一样。

检查React组件 (Inspecting React Components)

1. Open your app and inspect the page with developer tools (Command+Option+I).
   打开您的应用程序，并使用开发人员工具(Command + Option + I)检查页面。
2. Select the React Developer Tools
   选择React开发者工具

3. Pick a component in the tree to see its state and current props.

3.在树中选择一个组件以查看其状态和当前道具。

You can also select a React element directly from the page by hovering over it with the selection tool:

您还可以通过使用选择工具将鼠标悬停在页面上，直接从页面中选择一个React元素：

修改状态 (Modifying the State)

If you want to update your state in the browser— you can! Modify it by clicking and editing state attributes in the React tab. This will re-render the DOM, passing the state down through the props.

如果要在浏览器中更新状态，可以！ 通过单击和编辑React选项卡中的状态属性来修改它。 这将重新渲染DOM，将状态传递给道具。

Happy coding! ?

编码愉快！ ？

翻译自: https://www.freecodecamp.org/news/how-to-see-your-react-state-props-in-the-browser-774098a50fcc/

react 渲染道具