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

我想用React。headloom.js文档说：

在最基本的情况下，headloom.js只是响应滚动事件从元素中添加和删除CSS类

直接与React控制的元素一起使用是否合适？我知道当DOM结构发生变化时会做出反应，但只修改属性应该可以。真的是这样吗？你能给我看一下官方文件中有没有什么地方说这是推荐的吗

旁注：我知道，但我想用原来的headloom.js来代替

---

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

如果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)
});

类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
类别：[“蓝色”、“粗体”]
}
}
componentDidMount（）{
设置超时（（）=>{
日志（“修改状态”）；
这是我的国家({
类：this.state.classes.concat（[“big”]）
});
}, 2000)
}
render（）{
返回(
你好
)
}
}
ReactDOM.render(

我们从一个组件开始，该组件具有基于其状态的类
blue
和
bold
。一秒钟后，我们添加
grayBg
类而不使用React。另一秒钟后，该组件设置其状态，以便该组件具有类
blue
、
bold
和
big
，以及
 grayBg
类丢失

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

一般来说，如果您需要对React组件进行手动DOM操作，最好的策略是将手动操作或插件封装在它自己的组件中，使其能够100%控制