在 React 中重写组件实例上的 prop

Question

如果组件有一个现有的 prop 传递给它，我如何在 HOC 中覆盖它。以下内容将显示bar而不是changed，这从应用程序的角度来看是有意义的。

class App extends React.PureComponent {
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        {this.props.foo}
      </div>
    );
  }
}

const App2 = props => <App {...props} foo={"bar"} />;
const App3 = props => <App2 {...props} foo={"changed"} />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App3 />, rootElement);

https://codesandbox.io/s/k015wplr6o

这是一个更大的应用程序的一部分，其中存储了组件的实例，稍后必须使用不同的值作为 prop 重新创建该实例。