响应本机父子通信和返回值

Question

我是反应原生环境的初学者.我希望通过本机来理解父母的孩子沟通.

1. 家长会将一个号码传递给孩子 - 例如,父母将"2"传给孩子.

2. 子将具有多次相同数字2次的处理函数,并将结果返回给父级. - 例如2*2并返回

3. parent将调用子函数并查看输出是否正确并在父容器上打印结果

4. 如果我在像c ++或java这样的编程语言中做到这一点.

   *

parent.number = 2;
  parent.result = child.getResult(parent.number);
  if(parent.result == 4){
      Print "child return correct value";
  }else{
      child return wrong value.
  }

*

我已经在网上看到了几个反应原生教程,但是,这个父母的孩子沟通仍然不清楚.

有人可以请代码2对本地js文件做出反应,一个用于父母,另一个用于孩子,并向我展示通信.

谢谢

Answer 1

它是通过将回调/处理程序传递给子组件来完成的,这是一个例子.我没有测试过它.

Parent.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Child from './Child.js';

export default class Parent extends Component {
    constructor() {
        super();
        this.state = {
            result: 0
        };
    }

    getResponse(result){
        this.setState({result});
    }

    render(){
        return (
            <View>
                <Text>{this.state.result}</Text>
                <Child num={2} callback={this.getResponse.bind(this)}>
            </View>
        );
    }
}

Child.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class Child extends Component {
    calc(){
        this.props.callback(this.props.num * 2);
    }

    render(){
        return (<Button onPress={() => this.calc()} title="Calc" />)
    }
}

这些是一些推荐读物,以便更好地理解反应 https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/lifting-state-up. HTML