反应本机父子通信并返回值

Question

我是反应原生环境的初学者。我想了解反应本机中的亲子交流。

>

父母将传递一个数字给一个孩子——例如，父母将“2”传递给一个孩子。

孩子将有一个处理函数，该函数将相同的数字乘以2次，并将结果返回给父。-例如2*2并返回

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

如果我用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>
        );
    }
}

小孩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.htmlhttps://facebook.github.io/react/docs/lifting-state-up.html