在React Native中将状态从子组件传递到父组件

时间:2017-07-02 22:37:56

标签: react-native parent-child state

我的应用程序有一个设置屏幕(子组件),您可以在其中更改有关您自己的信息,我试图在我的应用程序的配置文件屏幕(父组件)上进行渲染。因此,配置文件屏幕会显示您的信息,如果您想更改任何信息,请在设置中执行此操作。现在,我在设置屏幕中所做的任何更改都会显示在Firebase中,但如果我返回到配置文件屏幕,则设置中的更改不会呈现。当然,如果我关闭应用程序并重新加载它,那么更改将会在那里,因为设置中的更改正在注册到firebase;但是,状态不会从子组件传递给父组件。有没有人对如何将状态从设置(子)组件传递到配置文件(父)组件有任何建议?

3 个答案:

答案 0 :(得分:12)

您可以尝试使用redux,每当您在redux store中更改数据时,它都会通过props存储数据。

其他想法是,将setState方法传递给子组件。

class Parent extends Component {
    updateState (data) {
        this.setState(data);
    }
    render() {
        <View>
            <Child updateParentState={this.updateState.bind(this)} />
        </View>
    }
}

class Child extends Component {
    updateParentState(data) {
        this.props.updateParentState(data);
    }

    render() {
        <View>
            <Button title="Change" onPress={() => {this.updateParentState({name: 'test'})}} />
        </View>
    }
}

答案 1 :(得分:4)

您应该查看一个状态管理模块,例如Redux,看看它是否适用于您的应用程序,但没有任何东西可以通过执行以下操作来实现:

// ---------------------------------------------
// Parent:

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={val => this.updateData(val)} />
    );
  }
}

// ---------------------------------------------
// Child:

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick()}>Test</button>
    );
  }
}

答案 2 :(得分:1)

在尝试了几个不同的选项后,我们决定实施Redux来管理我们应用中的状态。这对我们的导航来说很难做到,但是现在一切都已经确定了,我说它值得付出努力。还有其他状态管理解决方案,比如我们调查的MobX,但决定使用Redux,因为它符合我们的导航布局。