React Native Child Parent通信

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>
  );
}