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

Question

我想將headroom.js與React一起使用。 Headroom.js文檔說：

在它最基本的headroom.js只是添加和刪除元素中的CSS類以響應滾動事件。

將它直接用於React控制的元素是否可以？ 我知道當DOM結構發生變異時，React會失敗 ，但修改屬性應該沒問題。 這真的是這樣嗎？ 你能否在官方文件中告訴我一些地方，建議與否？

_{旁注：我知道反應空間 ，但我想使用原始的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％控制的自己的組件中。 有關此類示例，請參閱有關包裝DOM Libs的這篇文章 。