从dom反应元素更改状态

Question

I have been using this function:

window.FindReact = function (dom) {
  for (var key in dom) {
    if (key.startsWith('__reactInternalInstance$')) {
      var compInternals = dom[key]._currentElement;
      var compWrapper = compInternals._owner;
      var comp = compWrapper._instance;
      return comp;
    }
  }
  return null;
};
var someElement = $x("someElement")[0];
window.FindReact(someElement).setState({
  hover: true
});

To hover over elements in our website but since React 16, this is broken with an error

'VM25001:1 Uncaught TypeError: Cannot read property '_owner' of undefined at window.FindReact (:1:181) at :3:18'

How can I fix this?

Answer 1

You can create the logic to manipulate state from the DOM from inside React:

constructor() {
  // A function to manipulate the state:
  this.changeState = this.changeState.bind(this);

  const domElementToManipulateState = document.getElementById('domElement');

  domElementToManipulateState.addEventListener('hover', this.changeState);
}