在React中使用类名，ID和数据属性的最佳做法是什么

Question

我已经使用React构建了一个大型应用程序，并且调试起来变得非常困难（我也使用样式化的组件），并且我想要一种方法来在检查dom时快速识别元素和组件。

样式化的组件会生成随机哈希，这意味着有时很难找到确切的组件。

我想知道人们是否可以建议使用id，类或数据属性（或最好的组合），并且由于标识符主要用于调试和测试，因此是否有一种好的方法可以将其剔除生产捆绑的？也许使用webpack或其他替代方法。

Answer 1

样式化组件随附Babel插件，您可以使用该插件进行更好的调试。 您可以通过以下方式安装它：

npm install --save-dev babel-plugin-styled-components

您可以add it to babel config赞：

{
  "plugins": ["babel-plugin-styled-components"]
}

这将显示在React DevTools中以文件名为前缀的样式化组件的名称。这可以帮助所有styled.DOMNode出现在您的devtools中。

来自docs：

  

增加了在React中显示组件真实名称的支持   开发工具。考虑编写呈现按钮的样式化组件   元素，称为MyButton。它通常会显示为   对于您所有的组件，但使用此插件，它们都会显示。

文档还指定了用于配置displayName和fileName之类的选项，您可以找到here