Question

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

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

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

_{旁注：我知道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协调策略是一个黑盒子，很难说，＆＃34;好吧，只要React没有定义任何类，我的用例就会起作用。＆＃34;例如，React可能会决定使用innerHTML来应用大量更改而不是单独设置属性。

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

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

1 个答案: