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

Question

我想使用headroom.js与React。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类的组件开始。一秒钟后，我们添加grayBg类没有使用React。再过一秒钟，组件设置其状态，使组件具有blue, bold和big类，grayBg类丢失。

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

一般来说，如果你需要对React组件进行手动DOM操作，最好的策略是将手动操作或插件包装在它自己的组件中，这样它可以100%控制。