3

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

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

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

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

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

4

1 回答 1

5

如果 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 的这篇文章。

于 2015-10-07T15:26:16.813 回答