如何在反应中使用上下文在类和功能组件之间共享状态？答案

【问题标题】：How do I use context to share state between a class and a functional component in react?如何在反应中使用上下文在类和功能组件之间共享状态？
【发布时间】：2019-07-02 09:38:20
【问题描述】：

我有一个顶级上下文提供者，后跟一个父类组件，后跟一个功能性无状态子。

我可以从子项更新我的上下文值，但不能从父项更新，即使父项中的值更新。

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将“onPress”更改为“onClick”即可。我已经测试过了。

【讨论】：