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

Question

我想将headroom.js与React一起使用。 Headroom.js文档说：

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

将它直接用于React控制的元素是否可以？ 我知道当DOM结构发生变异时，React会失败 ，但修改属性应该没问题。 这真的是这样吗？ 你能否在官方文件中告诉我一些地方，建议与否？

_{旁注：我知道反应空间 ，但我想使用原始的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类的组件开始。 一秒钟后，我们添加grayBg类而不使用React。 在另一秒之后，组件设置其状态，以便组件具有blue ， bold和big类，并且grayBg类丢失。

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

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