Как обновить состояние поставщика компонентов с помощью Context API

Question

Каков метод мутации контекста в дочернем компоненте функции?

Я прочитал пост Мутирующий контекст от детей , в котором объясняется, как это сделать с помощью простогообработчик события.то есть:

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

In Consumer -

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

передать функцию в качестве опоры компоненту и использовать ее непосредственно там, где вы хотите использовать вместо передачи ее в качестве параметра от одной функции к другой: -)