直接改变 React 控制的 DOM 元素的属性可以吗？

Question

我想在 React 中使用headroom.js。Headroom.js 文档说：

在最基本的 headroom.js 中，它只是在元素中添加和删除 CSS 类以响应滚动事件。

直接与 React 控制的元素一起使用是否可以？我知道当 DOM 结构发生变异时，React 会严重失败，但只修改属性应该没问题。真的是这样吗？你能告诉我官方文档中的某个地方是否推荐它吗？

_{旁注：我知道react-headroom，但我想改用原始的 headroom.js 。}

编辑：我刚试过，它似乎工作。我仍然不知道从长远来看这是否是一个好主意。

Answer 1

如果 React 尝试协调您更改的任何属性，事情就会崩溃。下面是一个例子：

class Application extends React.Component {
  constructor() {
    super();
    this.state = {
      classes: ["blue", "bold"]
    }
  }

  componentDidMount() {
    setTimeout(() => {
      console.log("modifying state");
      this.setState({
        classes: this.state.classes.concat(["big"])
      });
    }, 2000)
  }

  render() {
    return (
      <div id="test" className={this.state.classes.join(" ")}>Hello!</div>
    )
  }
}

ReactDOM.render(<Application />, document.getElementById("app"), () => {
  setTimeout(() => {
    console.log("Adding a class manually");
    const el = document.getElementById("test");
    if (el.classList)
      el.classList.add("grayBg");
    else
      el.className += ' grayBg';
  }, 1000)
});

这是演示：https : //jsbin.com/fadubo/edit?js,output

我们从一个具有类blue并bold基于其状态的组件开始。一秒钟后，我们在不使用 React 的情况下添加grayBg类。另一第二后，该组件设置其状态，从而使该组件具有的类，以及，和类都将丢失。blueboldbiggrayBg

由于 DOM 协调策略是一个黑匣子，所以很难说，“好吧，只要 React 没有定义任何类，我的用例就会工作。” 例如，React 可能会决定使用innerHTML大量更改而不是单独设置属性更好。

一般来说，如果你需要对一个 React 组件进行手动 DOM 操作，最好的策略是将手动操作或插件包装在它自己可以 100% 控制的组件中。有关此类示例，请参阅有关 Wrapping DOM Libs 的这篇文章。