反应原生父子通信并返回值 [英] React native parent child communication and return values

问题描述

我是 React Native 环境的初学者.我想了解反应原生中的父子交流.

1. Parent 将传递一个数字给一个孩子 - 例如，父母将2"传递给一个孩子.

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

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

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

   *

<块引用>

parent.number = 2;parent.result = child.getResult(parent.number);if(parent.result == 4){打印子返回正确值"；}别的{孩子返回错误的值.}

*

我在网上看过几个 react native 教程，但是这个亲子交流还是不清楚.

有人可以编写 2 个 react native js 文件，一个给父母，一个给孩子，并向我展示交流.

谢谢

解决方案

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

Parent.js

import React, { Component } from 'react';从'react-native'导入{文本，视图}；从'./Child.js'导入子项；导出默认类父级扩展组件{构造函数(){极好的();this.state = {结果:0};}获取响应(结果){this.setState({result});}使成为(){返回 (<查看><Text>{this.state.result}</Text><子编号={2}回调={this.getResponse.bind(this)}></查看>);}}

Child.js

import React, { Component } from 'react';import { Button } from 'react-native';导出默认类子扩展组件{计算(){this.props.callback(this.props.num * 2);}使成为(){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

I am a beginner to the react native environment. I want to understand parent child communication in react native.

1. Parent will pass a number to a child - As an example parent pass "2" to a child.

2. Child will have a processing function which multiple the same number 2 times and return the result back to parent. - As example 2*2 and return

3. parent will call child function and see if output if correct and print results on parent container

4. if I would have done this in a programming lang like c++ or java.

   *

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

*

I have seen couple of react native tutorials online but, still this parent child communication is not clear.

Can someone please code 2 react native js file one for parent and one for a child and show me the communication.

Thanks

解决方案

It is done by passing callbacks/handlers to child component, here is an example. I have not tested it though.

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" />)
    }
}

These are some recommended readings to understand better react https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/lifting-state-up.html

这篇关于反应原生父子通信并返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！