reactjs - React Native父子通信并返回值

Question

我是 React Native 环境的初学者。我想了解 native react 中的亲子沟通。

1. 父级将向子级传递一个数字 - 例如，父级将“2”传递给子级。

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

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

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.
  }

*

我在网上看过一些 React Native 教程，但是，这种亲子沟通仍然不清楚。

有人可以编写 2 个 React Native 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" />)
    }
}

这些是一些推荐阅读 Material ，可以帮助您更好地理解 React https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/lifting-state-up.html