javascript - 是否可以编写一个脚本来在 React 组件上注入(inject) props？

Question

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

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

但我不想每次都手动执行此操作，那不值得。我想编写一段( super hacky)个人的javascript，我可以将其注入(inject)到页面中，这会修改传递给该组件的 Prop 。

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

Answer 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 来更轻松地定位元素。