如何知道我要检查的组件？

Question

我在CRA中使用styledcomponents。事实是，当我检查浏览器中的元素时，我看到的只是这样：

<div class="js-cskdjf fdsfsjk fdsfds">..</div>

不知道这是什么组件，如何解决？我也弹出了该应用。

Answer 1

如果您使用的是CRA v2，则它支持babel-plugin-macros

通过将主要导入更改为：

，您可以在样式化组件中使用babel macro。

import styled, { createGlobalStyle } from 'styled-components/macro';

这将引入为组件设置样式的babel插件的所有属性（您将不得不弹出以添加这些属性），其中包括在devtools中显示组件名称，从而提供了更好的调试体验。有关更多信息，read docs here。

Answer 2

您可以使用'React Developer Tools'扩展来查看组件的布局：

• for Chrome，

• for FireFox。