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>
  )
}
}

将函数作为道具传递给组件，并在要使用的位置直接使用它，而不是将其作为参数从一个函数传递给另一个函数：-）

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

1 个答案: