使用 reactjs 访问 dom 元素答案

【问题标题】：Access dom element with reactjs使用 reactjs 访问 dom 元素
【发布时间】：2020-04-16 13:56:21
【问题描述】：

我有一个 AntD 组件，但我无权访问 html 标记以使用 useRef 将样式应用于下一个类，具体取决于条件：

span.ant-descriptions-item-content

这就是我使用的原因：

if(my condition) {
  document.querySelector('span.ant-descriptions-item-content').style.background="red"
}

可以使用本机方式访问 dom 元素，如 document.querySelector，还是在我的情况下存在另一种方法来执行此操作？

【问题讨论】：

直接 DOM 操作是 React 中的一种反模式。 React 有访问 DOMNodes、设置样式、属性等的方法......
@Drew Reese，你能告诉我如何访问那个选择器吗？
您能否提供一个Minimal, Complete, and Reproducible 代码示例？
@DrewReese，演示：codesandbox.io/s/basic-ant-design-demo-fdwxd?file=/index.js 请告诉我代码是否有效
技术上，是的，但绝对不推荐。我想说使用查询选择器来定位 DOMNode 只是作为最后的手段才真正有用。（想想逃生舱）。与其他组件库相比，Antd 似乎将它们的 UI 元素锁定了很多（因为它们似乎非常固执己见），而其他组件库将可用的类名作为组件的 props API 的一部分公开以允许自定义。 Antd 太紧了，我只能让 CSS 和 className 工作。 demo

【解决方案1】：

通常不建议混合处理更改网页呈现方式的不同工具。这可能会导致不可预测的行为和组件无法正确更新。如果您想使用 React 更改组件的外观，您应该在 React 中渲染该组件。

【讨论】：