Reaction-native: Как я могу изменить параметры дочернего компонента в контексте реакции?

Question

Мой root-native-что-то вроде этого: я пытаюсь работать с CONTEXT API.

import { ContextProvider} from './ContextProvider';
export default class App extends React.PureComponent {
  render() {
    return (
      <ContextProvider>
        <Navigator />
      <ContextProvider>
    );
  }
}

Я создаю простой компонент контекста, такой как:

ContextProvider:

export const ParamContext = React.createContext({ param:0 });

export class ContextProvider extends React.PureComponent {
  state = {
    param: 0,
  };

  render() {
    return (
      <ContextProvider.Provider value={this.state}>
        {this.props.children}
      </ContextProvider.Provider>
    );
  }
}

Я могу напечатать значение param в дочернем компоненте с помощью этого кода:

import { ParamContext } from './ContextProvider';
export default class child1 extends React.PureComponent  {
   static contextType = ParamContext;
   render(){
       console.log(this.context.param)
   }
}

это работает.

Теперь это мой вопрос.

Как я могу изменить param с дочерним компонентом в моем коде?

Answer 1

В официальной документации React для Context предлагается передать функцию в дополнение к вашему значению, с помощью которой вы можете изменить значение:

// ContextProvider

export const ParamContext = React.createContext({ param:0, setParam: () => {} });

export class ContextProvider extends React.PureComponent {
    state = {
        param: 0
    }

    setParam = (param) => this.setState({ param });

    render() {
        const { setParam } = this;
        return (
            <ParamContext.Provider value={{...this.state, setParam }} >
                {this.props.children}
            </ParamContext.Provider>
        );
    }
}


// ContextConsumer
const ContextConsumer = (props) => {
    return (
        <ParamContext.Consumer>
            {({param, setParam}) => <Button onPress={() => setParam(param + 1)} title={`Current value: ${param}`} />}
        </ParamContext.Consumer>
    );
}

Этот пример увеличит param на значение 1 при каждом нажатии кнопки.