在 React 中使用类名、ID 和数据属性时的最佳实践是什么答案

【问题标题】：What are the best practices when using classnames, ids and data-attributes in React在 React 中使用类名、ID 和数据属性时的最佳实践是什么
【发布时间】：2019-03-05 22:16:43
【问题描述】：

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

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

我想知道人们是否可以建议是否使用 id、类或数据属性（或组合是最好的），并且由于标识符主要用于调试和测试，如果有一个很好的方法来删除它们生产包的？也许使用 webpack 或其他替代方案。

【问题讨论】：

标签： javascript html css reactjs custom-data-attribute

【解决方案1】：

Styled Components 附带一个 Babel 插件，您可以使用它来进行更好的调试。你可以安装它：

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

你可以add it to babel config点赞：

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

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

来自docs：

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

文档还指定了配置这些选项的选项，例如 displayName 和 fileName，您可以找到 here

【讨论】：

这看起来很公平。但如果可能，宁愿不添加另一个包。但会调查它。在您看来，如果我只是尝试使用数据属性，那行得通吗？
@TheDecimator 如果您将 data 属性添加到您的 html 中，按您的话来说这已经很大了，它会增加您的包大小并需要不断维护，您需要更多的包和配置来删除它们生产。