时间戳

首页 > 解决方案 > 如何在反应中使用上下文在类和功能组件之间共享状态？

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

问题描述

我有一个顶级上下文提供程序，然后是一个父类组件，然后是一个功能性无状态子项。

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

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

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

标签： javascriptreactjs

解决方案

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

推荐阅读