Chrome 开发者工具，React 组件未显示组件结构答案

【问题标题】：Chrome developer tools , React component not showing component structureChrome 开发者工具，React 组件未显示组件结构
【发布时间】：2022-11-15 15:08:49
【问题描述】：

我是 React 新手，我制作了一个简单的 React 应用程序。

class App extends React.Component {
state = {
    counter: 0
}
render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
 }
}



ReactDOM.render(<App />, document.getElementById('root'))

浏览器中的输出似乎没问题。（React 元素已被渲染并且在浏览器上可见）- DOM 元素已创建但是在书签组件应用程序的开发人员工具中显示为红色三角形，您看不到创建的组件结构，悬停在三角形上显示消息：“此组件未在严格模式下运行..”

应该是这样的（我的导师截图）

我在 Visual Studio 代码 IDE 中向组件添加了严格模式（无结果）：

   <React.StrictMode>
      <div>
        <h1>Hello!</h1>
      </div>
  </React.StrictMode>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您必须将它包裹在导致问题的组件周围，而不仅仅是围绕一个 div。在那里你调用你的 App 组件，可能来自 index.js？

  <React.StrictMode>
     <App />
  </React.StrictMode>

并从设置中删除所有过滤器以显示结构：

【讨论】：

谢谢你。删除了警告，但我仍然看不到组件书签（div 和 h1）中 App 内部的内容
@Luke，我更新了答案
谢谢你。正常工作。

【解决方案2】：

嗨使用反应开发者工具扩展

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

【讨论】：

谢谢 Vijay，但已经安装了。

【解决方案3】：

在浏览器中安装反应开发者工具并启用它。

这是 google chrome 工具的链接： https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

【讨论】：