如何使用 Context API 更新组件提供者的状态

Question

在函数的子组件中改变上下文的方法是什么？

我在mutating context from children 上阅读了一篇文章，其中解释了如何通过简单的事件处理程序来实现。即：

<MyContext.Consumer>
  <button onClick={() => setCount(count + 1)}>parent button +1</button>
</MyContext.Consumer>

但是，我想在子组件函数中更新父组件的函数（使用上下文）。

可以通过将该函数作为回调传递。

public anotherFunction(count, setCount) {
  // use the setCount here
  setCount(count + 1)
}

public handleClick(setCount) {
  // ..do some stuff to get the count
  let count = 10;
  this.anotherFunction(count, setCount);
}

render() {
  return(
    <MyContext.Consumer>
      <button onClick={() => this.handleClick(setCount)}>parent button +1</button>
    </MyContext.Consumer>
  )
}

现在这个例子有效。但是，在所有函数中都必须通过 setCount 函数似乎无关紧要。会不会有类似的事情发生？

public anotherFunction(count) {
  // perhaps something like this: 
  this.context.setCount(count + 1) // <- this doesn't work..
}

public handleClick() {
  // ..do some stuff to get the count
  let count = 10;
  this.anotherFunction(count);
}

render() {
  return(
    <MyContext.Consumer>
      <button onClick={() => this.handleClick()}>parent button +1</button>
    </MyContext.Consumer>
  )
}

还有其他更好的方法吗？

我已经创建了一个沙盒来更清楚地演示函数中的使用示例：

https://codesandbox.io/embed/suspicious-jackson-y3tk4?fontsize=14&module=%2Fsrc%2FMyForm.tsx

Answer 1

上下文 api 的通用实现 -

在提供者中 -

this.state = {
      count: 0
    }

testFunction = (count) => {
// do whatever you want to do 
  this.setState({
    count: count + 1;
})

<AppContext.Provider
        value={{
         testFunction: this.testFunction,
        }}>
        <App />
      </AppContext.Provider>

在消费者中 -

export default props => (
    <AppContext.Consumer>
        {({testFunction}) => (
          <ChildComponent testFunction={testFunction} />
        )}
      </AppContext.Consumer>
);

然后，

export class ChildComponent extends React.Component { 
  // your component here

public anotherFunction(count) {
  // perhaps something like this: 
  const {testFunction} = this.props;
  testFunction(count);
}

public handleClick() {
  // ..do some stuff to get the count
  let count = 10;
  this.anotherFunction(count);
}

render() {
  return(
      <button onClick={() => this.handleClick()}>parent button +1</button>
  )
}
}

将函数作为道具传递给组件，并直接在您想要使用的地方使用它，而不是将其作为参数从一个函数传递给另一个函数:-)