ios - React Native 父子通信

Question

Parent Child communication seems no problem using pass props:

mainpage.ios.js 代码:

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

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

Answer 1

您将传递一个回调，然后通过 props 传递它，随着您的设置变得更高级，可能会利用 componentWillReceiveProps Hook 。

如果你经常这样做，那么是的，你应该使用 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>
  );
}

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