Question

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

mainpage.ios.js代码：

var OtherPage = require('./otherpage');
<OtherPage value={2}/>

然后在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 <Other data={data} onChange={this.onChange}></Other>;
  }

}

class Other extends Component {
  render() {
    const { data } = this.props;
    console.log(`Other Component Data is ${data}`);
    return (
      <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
    );
  }
}

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

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 <Other data={data} onChange={this.onChange}></Other>;
  }

}

const Other = ({ data, onChange }) => {
  return (
      <TouchableOpacity onPress={() => {onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
  );
}

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() {
  <TouchableOpacity onPress={this.toggle}>
    <View>Some View</View>
  </ToucableOpacity>
}

React Native Child Parent通信

2 个答案: