react-native:如何在反应上下文中更改子组件的参数?

Posted

技术标签:

【中文标题】react-native:如何在反应上下文中更改子组件的参数?【英文标题】:react-native: How can I change parameters from a child component in react context? 【发布时间】:2019-09-22 11:59:14 【问题描述】:

我的根 react-native 是这样的: 我尝试使用 CONTEXT API。

import  ContextProvider from './ContextProvider';
export default class App extends React.PureComponent 
  render() 
    return (
      <ContextProvider>
        <Navigator />
      <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

【问题讨论】:

【参考方案1】:

offical React documentation for 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

【讨论】:

以上是关于react-native:如何在反应上下文中更改子组件的参数?的主要内容,如果未能解决你的问题,请参考以下文章

反应钩子如何确定它们的组件?

如何从另一个组件 React 更改反应上下文的值

react-native 如何在子组件中获取父组件背景颜色

通过反应上下文 api 将子状态传递给父组件

尝试基于 AsyncStorage React-Native 渲染组件时,对象作为反应子级无效

如何从反应中的子组件内部更改父组件的背景颜色,盖茨比