react 渲染道具
by Andrew Bales
通过安德鲁·巴尔斯
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的快速解决方案!
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元素,控制台或网络一样。
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元素:
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 渲染道具
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态