React: 在 componentDidUpdate 中操作 DOM

嗨，这更像是一个问题，我想就componentDidUpdate DOM 操作展开讨论。

我正在创建一个 React 插件。 它必须做一些 DOM 计算，因为 CSS 不够强大，无法涵盖这个插件需要做的一切。 问题是我需要根据由同一组件呈现的其他一些 DOM 元素的 getBoundingClientRect() 的返回值来调整一些 CSS 属性。

所以从技术上讲，我们有 3 个选择：

1) 在componentDidUpdate计算getBoundingClientRect并用计算值调用setState 。 我害怕在某些情况下可能发生无限循环，所以我不会选择这个。

2) 像在 1) 中那样做，并用shouldComponentUpdate玩一下，但这看起来非常复杂且不可读。 会弹出许多取决于特定用例的问题。

3) 从 componentDidUpdate 更新 DOM。 这是我决定采用的解决方案，它有效，简单，稳定并且按预期工作。 但是我觉得我处于边缘，所以我想仔细检查一下这是一种可以做事的方式。 可以在componentDidUpdate操作 DOM 吗？ 每次完成render都会调用它，我可以放弃我的更改，因为接下来的render我将再次修改 DOM。

这是代码的一部分

componentDidMount() {
  this.recalculateIndent();
}

componentDidUpdate() {
  this.recalculateIndent();
}

recalculateIndent() {
  // calculate indent based on getBoundingClientRect of some DOM reference
  this.textareaRef.style.textIndent = `${indent}px`;
}

render() {
   return (
   ...
   <textarea ref={ref => this.textareaRef = ref}/>
   ...
   );
}