Reactnative React Native Child Parent 通信

你可以传递一个回调，然后通过props 传递它，随着你的设置越来越高级，很可能会利用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>
  );
}

EDIT现在你应该只使用功能组件和钩子，React网站上有很多关于这方面的文档，但 idea 是相似的:-)