React能否检测到使用jQuery对组件属性所做的更改？

我有一个React组件，可以在多个应用程序中共享。当每个应用程序中的状态发生变化时，这些应用程序需要更改组件的质量（某些按钮的类别）。但出于某种原因，他们都决定使用jQuery来实现这一点：使用

addClass（）

和

removeClass（）

更改按钮的类

现在我需要根据这些组件的类来检测它们的变化，但我不能将其作为状态变化的一种形式，因为状态没有变化

当另一个参与者修改属于其组件之一的DOM元素时，React可以检测到吗？我最初的猜测是“否”，因为React跟踪的是虚拟DOM，而不是调用这些jQuery方法的“真实”DOM。但我希望有办法

---

谢谢。

鉴于您的情况，您可以使用React和React来收听课堂变化

您可能会创建一个变异观察者函数，传递节点和回调处理程序：

const mutationObserver = (targetNode, handler) => {
  const config = { attributeFilter: ['class'] }; // filter the mutations you want to listen

  const callback = function(mutationsList) {
    for (let mutation of mutationsList) {
        handler(mutation.oldValue);
    }
  };

  const observer = new MutationObserver(callback);

  observer.observe(targetNode, config);
};

在您的组件上，您需要创建一个引用以传递给：

class MyClass extends React.Component {
  constructor(props) {
    this.myRef = React.createRef();
  }

  myHandler = () => { // implement here logic to handle changes }

  componentDidMount() {
    mutationObserver(this.myRef.current, this.myHandler)
  }

  render() {
    return <div ref={this.myRef} class="my-classes">my element to listen<div>
  }
}

类MyClass扩展了React.Component{
建造师（道具）{
this.myRef=React.createRef（）；
}
myHandler=（）=>{//在此处实现处理更改的逻辑}
componentDidMount（）{
mutationObserver（this.myRef.current，this.myHandler）
}
render（）{
返回我的元素以进行侦听
}
}

---

你可以考虑创建一个OHC，特别是如果它将被应用到几个组件。

是的，你的猜测是正确的。React不监视DOM的更改。jQuery和React在处理UI的方法上彼此非常正交。