使用用户脚本修改 React 组件

Question

简洁版本

当我无法访问原始源代码时，如何使用用户脚本（例如 Tampermonkey 注入的代码）修改 React 组件而不破坏应用程序？

加长版

直接修改 React 组件的 DOM 可能会破坏应用程序，因为协调算法可能会因手动 DOM 更改而感到困惑。因此，我想修改我的用户脚本中的 React 组件，以便 React 可以不受阻碍地继续渲染。

在一个简单的设置中，React 会发现全局命名空间中的组件，我们可以轻松修改组件（请参阅此小提琴以获取工作示例）：

oldComponent = Component
function Component(props) {
  // modify the props to change the appearance of the component
  return oldComponent(modifiedProps);
}

然而，部署应用程序时情况会更加复杂，因为组件通常使用webpack进行捆绑。我如何能够在组件已捆绑的应用程序中重现上面的示例？