是否可以编写脚本在 React 组件上注入 props？答案

【问题标题】：Is it possible to write a script to inject props on a React component?是否可以编写脚本在 React 组件上注入 props？
【发布时间】：2019-12-28 07:06:55
【问题描述】：

所以这有点疯狂。我使用了一个使用 React 构建的 Web 应用程序，它做出了一些我不同意的设计决策。

幸运的是，设计实际上很简单，可以完全按照我想要的方式进行更改。我可以打开 Chrome React 开发工具并更改分配给特定组件的道具。

但我不想每次都手动执行此操作，这不值得。我想写一个（超级hacky）个人的javascript，我可以注入到页面中，它修改传递给这个组件的道具。

想知道是否有人知道从 React 外部注入 props 的简单技巧。也许可以挂钩到 React 用来响应开发工具的任何机制？

【问题讨论】：

标签： javascript reactjs react-props react-component react-devtools

【解决方案1】：

我发现以下代码通常适用于最新版本的 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
  );
}

例如，您可以在此处导航 https://ahfarmer.github.io/calculator/ 并将以下所有代码粘贴到 Chrome DevTools 控制台中：

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
  );
}

updateProps(document.getElementById("root").childNodes[0].childNodes[0], { value: 9000 });

计算器的值将以编程方式更新为 9000。

根据经验，您希望定位在 React 组件中呈现的最顶层 DOM 元素。

// React component
class Application extends React.Component {
  render() {
    return <div id="myapp">Hello {this.props.name}</div>;
  }
}

// Your javascript code
updateProps(document.getElementById("myapp"), { name: 'Jane' }));

您可能需要一些额外的黑客攻击才能使其适用于您的特定用例。只需弄清楚要操作哪些 React 内部属性即可。

您还可以使用 jQuery 来更轻松地定位元素。

【讨论】：