javascript - Chrome 开发者工具，React 组件不显示组件结构

Question

我是 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 元素已创建但是在 Bookmark Components App 的开发人员工具中显示为红色三 Angular 形，您看不到创建的组件结构，悬停在三 Angular 形上显示消息:“此组件未在严格模式下运行。”

应该是这样的(我的导师截图)

我在 Visual Studio Code IDE 中为组件添加了严格模式(无结果):

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

Answer 1

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

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

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