javascript - 有没有办法编写脚本来更新 React 功能组件道具？

Question

我试图编写一个 chrome 扩展来更新 React 组件的道具。但似乎它适用于类组件，但不适用于功能组件。有任何想法吗？

这是示例代码：

// just add two very simple components
const FunctionComponent = ({ text }) => <div>FunctionComponent: {text}</div>;

class ClassComponent extends React.Component {
  render() {
    return <div>ClassComponent: {this.props.text}</div>;
  }
}

ReactDOM.render(
  <>
    <FunctionComponent text="--" />
    <ClassComponent text="--" />
  </>,
  document.getElementById("root")
);

// update props outside of react
function updateProps(domElement, newProps) {
  var keys = Object.keys(domElement);
  var instanceKey = keys.filter((prop) =>
    /__reactInternalInstance/.test(prop)
  )[0];
  var instance = domElement[instanceKey];

  for (var prop in newProps) {
    if (newProps.hasOwnProperty(prop)) {
      instance.return.stateNode.props[prop] = newProps[prop];
    }
  }
  instance.return.stateNode.updater.enqueueForceUpdate(
    instance.return.stateNode
  );
}

// update ClassComponent: works!
updateProps(document.getElementById("root").childNodes[1], { text: "works!" });

// update FunctionComponent: can't get return.stateNode
updateProps(document.getElementById("root").childNodes[0], { text: "works!" });

代码笔： https ://codepen.io/nick511/pen/JjGqaEm

ps 函数 updateProps 来自： 是否可以编写脚本在 React 组件上注入 props？

标签： javascriptreactjs