如何知道我正在检查哪个组件？

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.