是否可以编写一个脚本来在 React 组件上注入 props? [英] Is it possible to write a script to inject props on a React component?

问题描述

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

So this is a little crazy. There's a web app that I use that is built with React, which has made certain design decisions that I disagree with.

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

Luckily, the design is actually simple to change exactly the way I want. I can just open the Chrome React devtools and change the props assigned to a specific component.

但是我不想每次都手动执行此操作，这不值得.我想编写一个(超级 hacky)个人 javascript 位，我可以将其注入到页面中，它会修改传递给此组件的道具.

But I don't want to manually do this every time, that's not worth it. I want to write a (super hacky) personal bit of javascript that I can inject into the page, which modifies the props being passed to this component.

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

Wondering if anyone knows a simple hack to inject props from outside of React. Perhaps it's possible to hook into whatever mechanism React uses to respond to the devtools?

推荐答案

我发现以下代码通常适用于最新版本的 React.

I've found the following code to generally work with the latest version 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
  );
}

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

As an example, you can navigate here https://ahfarmer.github.io/calculator/ and paste all of the code below into the Chrome DevTools console:

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.

The calculator's value will be programmatically updated to 9000.

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

As a rule of thumb, you want to target the topmost DOM element being rendered in the React component.

// 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 内部属性即可.

You may need some additional hacking to make this work with your specific use case. It's just a matter of figuring out which React internal properties to manipulate.

您也可以使用 jQuery 来更轻松地定位元素.

Also you can use jQuery to make targeting the elements easier.

这篇关于是否可以编写一个脚本来在 React 组件上注入 props?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！