React Native Child Parent通信

使用传递道具时，父子通信似乎没问题：

mainpage.ios.js代码：

var OtherPage = require('./otherpage');  

然后在otherpage.ios.js我可以使用this.props.value来利用变量，但是如果我更新otherpage.ios.js上的值，它是如何传达回mainpage.ios.js的？

Answer 1

您将传递一个回调然后通过道具传递它，可能利用componentWillReceiveProps钩子，因为您的设置变得更高级。

如果你这么做，那么是的，你应该使用Flux或Redux或类似的。

 import React, { Component, TouchableOpacity, Text, } from 'react-native'; class Main extends Component { constructor() { super(); this.state = { data: 'default' } } onChange = (data) => { console.log(`Data changes to ${data} !`); this.setState({ data }); } render() { const { data } = this.state; return ; } } class Other extends Component { render() { const { data } = this.props; console.log(`Other Component Data is ${data}`); return (  {this.props.onChange('Success!')} }> {data}  ); } } 

此外，如果在知道辅助组件中不需要状态时使用静态组件，则可以构建更多可重用的function组件：

 class Main extends Component { constructor() { super(); this.state = { data: 'default' } } onChange = (data) => { console.log(`Data changes to ${data} !`); this.setState({ data }); } render() { const { data } = this.state; return ; } } const Other = ({ data, onChange }) => { return (  {onChange('Success!')} }> {data}  ); } 

Answer 2

我强烈建议你在这里使用Flux。 当您发现自己需要相同信息的各种组件时，则意味着您需要Flux。 你当然可以使用一堆回调等等，但随着你的应用程序的增长和变得越来越复杂，如果没有像flux这样的东西来管理它会更加困难。

使用flux，您将使主页组件听取更改，并在更改发生后执行某些操作。 例如：

 mainpage: componentDidMount() { SomeStore.addChangeListener(this.updateComponent) } componentWillUnmount() { SomeStore.removeChangeListener(this.updateComponent) } updateComponent() { this.setState value: SomeStore.getValue() } otherpage: toggle() { SomeActions.change(this.props.value + 1) } render() {  Some View  }