使用React Context API在创建新对象时更新组件

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newObj: {},
    };
  }

  updateNewObj = (newObj) => {
    this.setState({ newObj });
  };

  render() {
    return (
      <MyContext.Provider
        value={{
          newObj: this.state.newObj,
          updateNewObj: this.updateNewObj,
        }}
      >
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(context) => (
          <div>
            <button
              onClick={() => {
                const newObj = { name: "example" };
                context.updateNewObj(newObj);
              }}
            >
              Create New Object
            </button>
            <p>{JSON.stringify(context.newObj)}</p>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}