检查组件树与 Props
深入查看组件层次结构，并读取实时的 prop 和 state 值。
检查组件树与 Props 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
本课将教您在 React DevTools 中深入浏览嵌套的组件层级，并从 Components 面板的侧边栏读取复杂的属性和状态值。
组件树是一面镜子
您在 DevTools 中看到的每个组件都对应着 JSX 的嵌套结构。根节点通常是您的 App 组件。子组件会缩进显示在父组件下方， בדיוק如同它们在源代码中的排列方式。
选择组件
点击树中的任意组件名称。右侧面板会立即显示它的 **属性**、**钩子**（状态、效果、引用），以及定义该组件的 **源** 文件和行号。
读取字符串和数字属性
字符串属性会显示在引号中：`"hello"`。数字会直接显示，不带引号：`42`。布尔值会显示为 `true` 或 `false`。如果值被截断，您可以将鼠标悬停在其上方查看完整内容。
展开对象和数组属性
当属性值是对象或数组时，DevTools 会显示一个可折叠的树。点击 `{…}` 或 `[…]` 旁边的箭头将其展开，即可查看每个嵌套的键和值。
检查函数属性
函数属性（例如 `onClick` 处理程序）会显示为 `f onClick()`。您可以点击它们旁边的小箭头图标，跳转到 Sources 面板中的函数定义。
筛选组件树
使用 Components 面板顶部的搜索框按名称筛选。输入 `Button`，即可只显示名称中包含 *Button* 的组件。在包含数百个组件的应用中，这一功能非常实用。
从 DOM 跳转到 React
在 **Elements** 标签页中，右键点击一个 DOM 节点，然后选择 **检查 React 组件**（安装 DevTools 后即可使用）。DevTools 会切换到 Components 标签页，并选中渲染该节点的 React 组件。
在 DevTools 中编辑属性
在 DevTools 中双击属性值即可实时编辑。组件会立即使用新值重新渲染。这对于测试边界情况很有帮助，而且无需修改源代码。
将属性复制为 JSON
在 DevTools 中右键点击任意属性或状态值，然后选择 **复制值**。该操作会将值以 JSON 格式复制到剪贴板，方便粘贴到测试或文档中。
快速检查
如何在 React DevTools 的 Components 面板中展开对象或数组属性？
回顾
现在，您可以浏览组件树，读取字符串、数字、对象和函数，按名称筛选，从 DOM 元素跳转到 React 组件，并在 DevTools 中实时编辑属性。
接下来
下一课：**使用 Profiler 标签页**——您将记录渲染过程，读取火焰图，并找出导致交互缓慢的组件。
常见问题解答
「检查组件树与 Props」课时是免费的吗？
是的 — 「检查组件树与 Props」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「检查组件树与 Props」这节课中我会学到什么？
深入查看组件层次结构，并读取实时的 prop 和 state 值。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「检查组件树与 Props」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 安装并打开 React DevTools
- 检查组件树与 Props
- 使用 Profiler 标签页
- 调试常见 React 错误