react-native 父函数组件调用类子组件的方法(实例详解)

2024-12-02 10:40:11

react-native 父函数组件调用类子组件的方法，代码如下所示：

import React, {Component} from 'react';
import {Text, View,  TouchableOpacity} from 'react-native';

// 父
let child
onRefbbb = (ref) => {
    child = ref
}
clickccc = () => {
    child.myName()
}
const Parent =()=> {
        return(
            <View>
                <Child onRefaaa={onRefbbb} />
                <TouchableOpacity onPress={()=>clickccc()}>
                    <Text>onClick</Text>
                </TouchableOpacity>
            </View>
        )
}
export default Parent

// 子
class Child extends Component {
    componentDidMount(){
        this.props.onRefaaa(this)
    }

     myName = () =>{
        alert(11111111111111)
     }

    render() {
        return (<View></View>)
    }
}

补充：下面看下React 函数式组件之父组件调用子组件的方法

前言：

最近做一个React项目，所有组件都使用了函数式组件，遇到一个父组件调用子组件方法的问题，让我好一阵头疼。

我们都知道，React 中子组件调用父组件方法，使用 props 传递过来就可以在子组件中使用。但是父组件如何调用子组件方法呢？请看下面代码：

第一步：

在父组件中，使用 useRef 创建一个 ref

import { useRef } from 'react'
// 父组件中代码
const FCom = () => {
    const cRef = useRef(null);
    return (
        <div>
            <ChildCom ref={cRef} />
        </div>
    )
}

第二步：

子组件中代码：（使用了 forwardRef，useImperativeHandle）

import { forwardRef, useImperativeHandle } from 'react'
const ChildCom = forwardRef(({
  // 这里是一些props参数
}, ref) => {
    useImperativeHandle(ref, () => ({
        getData: getData,
        otherFun: otherFun
    }))
    function getData() {
        // to do something
    }
    function otherFun() {
        console.log('这是其他方法')
    }
    return (
        <div>子组件</div>
    )
})

第三步：

此时，在父组件中就可以随心所欲的调用子组件中的方法了！

import { useRef } from 'react'
// 修改父组件中代码
const FCom = () => {
    const cRef = useRef(null);
    const handleClick = () => {
        cRef.current && cRef.current.getData()
    }
    return (
        <div>
            <ChildCom ref={cRef} />
        </div>
    )
}

到此这篇关于react-native 父函数组件调用类子组件的方法的文章就介绍到这了,更多相关react-native父函数组件调用类子组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

react-native 实现渐变色背景过程

目录 react-native 渐变色背景 react-native学习记录滚动条轮播图示例渐变色 ScrollableTabView默认页面 ScrollableTabView背景颜色 ScrollableTabView选中颜色 ScrollableTabView未选中颜色 react-native 渐变色背景使用react-native-linear-gradient插件 1.安装 npm react-native-linear-gradient 2.链接 react-native
React Native 的动态列表方案探索详解

目录背景技术方案介绍内存异常处理未来规划背景时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体
使用react-native-image-viewer实现大图预览

目录 react-native-image-viewer大图预览先看一个实现的效果实例下面是一个简单的实例代码 Props react-native-image-viewer大图预览在移动开发中,特别是涉及到图片的应用开发中,经常会遇到图片预览等功能,并且预览支持图片的放大和缩小,在Android原生开发中可以使用PhotoViewPager库实现,如果在React Native中,可以选择使用react-native-image-viewer. 先看一个实现的效果实例使用前需要先安
详解React Native项目中启用Hermes引擎

目录引言一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启
使用react-native-doc-viewer实现文档预览

目录 react-native-doc-viewer文档预览具体步骤如下 react-native初体验的总结一.前提知识点二.开发前后相关的一些配置三.开发项目中用到的知识四.ui库五.项目搭建六.根据需要安装对应依赖七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r
react-native 父函数组件调用类子组件的方法(实例详解)

react-native 父函数组件调用类子组件的方法,代码如下所示: import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; // 父 let child onRefbbb = (ref) => { child = ref } clickccc = () => { child.myName() } const Parent =()=> { ret
vue父组件触发事件改变子组件的值的方法实例详解

父组件向子组件通信业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-
Vue组件全局注册实现警告框的实例详解

外部引入 <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script
vue组件中使用props传递数据的实例详解

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa
Kotlin 语言中调用 JavaScript 方法实例详解

Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J
C#调用Java方法实例详解

C#可以直接引用C++的DLL和转换JAVA写好的程序.最近由于工作原因接触这方面比较多,根据实际需求,我们通过一个具体例子把一个JAVA方法转换成可以由C#直接调用的DLL C#调用c++ C#调用C++的例子网上很多,以一个C++的具体方法为例. C++代码 // 获取一帧图像数据 MVSMARTCAMCTRL_API int __stdcall MV_SC_GetOneFrame(IN void* handle, IN OUT unsigned char *pData , IN unsig
JavaScript 中调用 Kotlin 方法实例详解

JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =
C++ 类的继承与派生实例详解

C++ 类的继承与派生实例详解继承性是面向对象程序设计最重要的特性之一,使软件有了可重用性,C++提供的类的继承机制. 继承与派生的概念一个新类从已有的类那里获得已有的特性,这种现象称为类的继承.同样也可以说成已有的类派生出来了新的类.类A继承自类B也就是类B派生了类A.所以继承和派生的关系就像小学时把字句和被字句的造句一样.有了继承与派生后,就有了父类/基类与子类/派生类,C++中将类B称为父类/基类,将类A称为子类/派生类. 派生类的声明: #include <iostream> u
Angular7中创建组件/自定义指令/管道的方法实例详解

组件使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设
JavaScript函数之call、apply以及bind方法案例详解

总结 1.相同点都能够改变目标函数执行时内部 this 的指向方法的第一个参数用于指定函数执行时内部的 this 值支持向目标函数传递任意个参数若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

react-native 父函数组件调用类子组件的方法(实例详解)

相关推荐

随机推荐