reactjs - 孩子的反应上下文没有改变

Question

我从类似的问题中阅读了解决方案，但没有帮助。
这是我的简单代码：https ://codesandbox.io/s/gracious-jennings-ugqzd

import myContext from "./myContext";
import Two from "./Two.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }

  render() {
    return (
      <myContext.Provider value={this.state}>
        <div className="App">
          <Two />
          <h2>{this.state.number}</h2>
        </div>
      </myContext.Provider>
    );
  }
}

export default App;

我需要对其进行设置，以便它可以在类 <Two /> 中的任何位置更改变量号。感谢帮助，谢谢。

Answer 1

你不能只是改变状态所以

  componentDidMount() {
    this.context.number = 100;
  }

如果你改变状态，react 不会重新渲染，因为你改变了它。您可以执行以下操作：

在应用程序中：

import React from "react";
import "./styles.css";
import myContext from "./myContext";
import Two from "./Two.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  increase = ()=> this.setState({number:this.state.number+1})

  render() {
    return (
      <myContext.Provider value={{...this.state,increase:this.increase}}>
        <div className="App">
          <Two />
          <h2>{this.state.number}</h2>
        </div>
      </myContext.Provider>
    );
  }
}

export default App;

成两半：

import React from "react";

import myContext from "./myContext";

class Two extends React.Component {
  static contextType = myContext;

  render() {
    return (
      <myContext.Consumer>
        {({ number,increase }) => <h1 onClick={increase}>{number}</h1>}
      </myContext.Consumer>
    );
  }
}

export default Two;