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

Question

如果组件有一个传递给它的现有属性，那么如何在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

这是一个较大的应用程序的一部分，该应用程序存储了一个组件的实例，后来必须使用不同的值重新创建该实例作为支撑。