3

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

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

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

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

4

1 回答 1

10

我发现以下代码通常适用于最新版本的 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 来更轻松地定位元素。

于 2019-08-23T03:41:08.843 回答