反应原生父子通信并返回值

本文介绍了反应原生父子通信并返回值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

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

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

如果我能在像 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"/>)}}

这些是一些推荐阅读，以更好地理解反应facebook.github.io/react/docs/thinking-in-react.htmlfacebook.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.

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

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

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

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 facebook.github.io/react/docs/thinking-in-react.html facebook.github.io/react/docs/lifting-state-up.html