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

Question

我想使用headroom.js与 react 。 Headroom.js 文档说:

At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event.

直接用React控制的元素可以吗？我知道 React fails badly当 DOM 结构发生变化时，但仅修改属性应该没问题。真的是这样吗？你能告诉我官方文档中是否有推荐或不推荐的地方吗？

_{旁注:我知道 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 类，没有。又过了一秒，组件设置其状态，以便组件具有类 blue、bold 和 big 以及 grayBg 类丢失。

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

一般来说，如果你需要对 React 组件进行手动 DOM 操作，最好的策略是将手动操作或插件包装在自己可以 100% 控制的组件中。请参阅this post on Wrapping DOM Libs举一个这样的例子。