Question

我有一个顶级上下文提供者，其次是Parent类组件，其后是功能性无状态Child。

即使值在父级中更新，我也可以从“子级”更新我的上下文值，但不能从父级更新。

如何使用上下文更新和共享两个组件之间的状态？

import React from "react";
import ReactDOM from "react-dom";

const Context = React.createContext();

const Provider = ({ children }) => {
  const [value, setValue] = React.useState(0);
  return (
    <Context.Provider value={{ value, setValue }}>{children}</Context.Provider>
  );
};

const Child = () => {
  const { value, setValue } = React.useContext(Context);
  return <div onClick={() => setValue(value + 1)}>Plus plus!!</div>;
};

class Parent extends React.Component {
  render() {
    const { value, setValue } = this.context;
    return (
      <div>
        <div onPress={() => setValue(value - 1)}>MINUS MINUS!</div>
        <div>{this.props.children}</div>
        <h1>{value}</h1>
      </div>
    );
  }
}
Parent.contextType = Context;

function App() {
  return (
    <Provider>
      <Parent>
        <Child />
      </Parent>
    </Provider>
  );
}

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

https://codesandbox.io/s/thirsty-oskar-ocmxr

Answer 1

将“ onPress”更改为“ onClick”将起作用。我已经测试过了。

我如何使用上下文在React中的类和功能组件之间共享状态？

1 个答案: