所以这有点疯狂。我使用了一个用 React 构建的 Web 应用程序，它做出了一些我不同意的设计决策。
幸运的是，设计实际上很简单，可以完全按照我想要的方式进行更改。我可以打开 Chrome React devtools 并更改分配给特定组件的props。
但是我不想每次都手动执行此操作，这不值得。我想编写一个（超级 hacky）个人 javascript 代码，我可以将其注入到页面中，它会修改传递给该组件的props。
想知道是否有人知道从 React 外部注入 props 的简单技巧。也许有可能挂钩 React 用来响应开发工具的任何机制？
我发现以下代码通常适用于最新版本的 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 使定位元素更容易。