使用useImperativeHandle时父组件第一次没拿到子组件的问题

目录
  • 用useImperativeHandle父组件第一次没拿到子组件
    • 背景需求
    • 问题
    • 解决方法
  • 用useImperativeHandle让父组件操纵子组件的状态和方法

用useImperativeHandle父组件第一次没拿到子组件

背景需求

一个tab两个按钮A、B，默认选中的A，当点击到B时需要显示B对应的图表。

考虑到B的图表在页面加载时已经初始化完成，所以点击B时再调用图表的resize方法。

由于tab中的图表是写在子组件里，所以通过useImperativeHandle实现父组件调用子组件方法，React版本"react": "^18.1.0",代码如下

父组件：

const childRef = useRef()
const item = [{
        name: 'XXXX',
        content: <RunningRecord cRef={childRef} />,
        handClick: childRef.current?.resizeChart
}]
return <>
    ……
    <li onClick={() => {
            setTimeout(() => {
                console.log('~~item.handClick',item.handClick)
                item.handClick?.()
            }, 200)
        }}
        key={item.name}>
        {item.name}
    </li>
    ……
    <RunningRecord cRef={childRef} />
</>

子组件：

function RunningRecord({ cRef }) {
    ……
    useImperativeHandle(cRef,()=>({
        resizeChart:()=> {dosomething……}
    }))

问题

这样写在本地开发模式中正常运行，但生产环境中父组件首次加载不能拿到子组件的方法，需tab切换到A再次且到B才行。

猜想原因，大概在生产环境中，父组件把子组件暴露出来的方法绑定到UI中的点击事件中，而子组件初始化的时机晚，初始完成后并没有把事件传回来。

这个猜想不一定准确，欢迎知道的小伙伴们补充。

解决方法

在父组件中，将子组件赋值的过程放在useEffect中，不写依赖项参数(不是没有依赖的空数组)，再运行，一切正常。

const usageRecordData = [{
    name: 'XXXX',
    content: <RunningRecord cRef={childRef} />,
}]
useEffect(() => {
    usageRecordData[1].handClick = childRef.current?.resizeChart
})

用useImperativeHandle让父组件操纵子组件的状态和方法

useImperativeHandle是react官方为了简便我们的ref操作，同时还可以让子组件返回给父组件自身的状态和方法去调用

useRef将ref绑定到某个子组件标签上，用以获取整个子组件的方法和参数

  • useImperativeHandle: 可以自定义暴露给父组件的方法或者变量

父组件

import React, { useState, useRef } from 'react'
import ChildList from './ChildList'
export default () => {
    let parentRef = useRef(null)
    const [name, setName] = useState('li')
    return <div>
        <ChildList parentRef={parentRef} name={name}></ChildList>
        <button onClick={() => {
            console.log("parentRef", parentRef)
        }}>获取子组件</button>
    </div>
}

子组件

import React, { useImperativeHandle, forwardRef } from 'react'
export default forwardRef((props, ref) => {
    console.log("ref", ref)
    useImperativeHandle(ref, () => {
        return {
            childFn
        }
    })
    console.log(ref)
    const childFn = () => {
        console.log('子组件方法')
    }
    return <div>
        <div ref={ref} />
    </div>
})

用了ref的桥梁就这样就可以在父组件中控制子组件了，而不仅仅只是子随父渲染了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • react使用useImperativeHandle示例详解

    目录 1.前言 2.useImperativeHandle初探 3.获取元素的几种方式 3.1 useRef:获取组件内部元素 3.2 forwardRef:父组件获取子组件内部的一个元素 3.3 useImperativeHandle:父组件可以获取/操作儿子组件多个元素 1.前言 相比大家看到useImperativeHandle会感到十分陌生,但部分开源代码经常会出现它的身影,网上查阅的资料也是含糊不清.经过一翻资料查询,终于摸清了一点,现在分享给各位爷. 2.useImperativeH

  • 基于useImperativeHandle的使用解析

    目录 useImperativeHandle的使用 useImperativeHandle 使用useImperativeHandle时父组件第一次没拿到子组件方法 背景需求 问题 解决方法 useImperativeHandle的使用 你不能在函数组件上使用 ref 属性,因为它们没有实例: import React, { Component } from 'react'; function MyFunctionComponent() {   return <input /> } class

  • react中的useImperativeHandle()和forwardRef()用法

    react中的useImperativeHandle()和forwardRef()用法

    目录 一.useImperativeHandle() 二.forwardRef() 三.案例 父组件 子组件 一.useImperativeHandle() useImperativeHandle(ref, createHandle, [deps]) useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值.在大多数情况下,应当避免使用 ref 这样的命令式代码. useImperativeHandle 应当与 forwardRef 一起使用. functio

  • 使用useImperativeHandle时父组件第一次没拿到子组件的问题

    目录 用useImperativeHandle父组件第一次没拿到子组件 背景需求 问题 解决方法 用useImperativeHandle让父组件操纵子组件的状态和方法 用useImperativeHandle父组件第一次没拿到子组件 背景需求 一个tab两个按钮A.B,默认选中的A,当点击到B时需要显示B对应的图表. 考虑到B的图表在页面加载时已经初始化完成,所以点击B时再调用图表的resize方法. 由于tab中的图表是写在子组件里,所以通过useImperativeHandle实现父组件调

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • React前端渲染优化--父组件导致子组件重复渲染的问题

    React前端渲染优化--父组件导致子组件重复渲染的问题

    目录 React前端渲染优化--父组件导致子组件重复渲染 说明 一般的优化方式 项目中常见会导致重复渲染的写法以及改进方法 组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback) render执行会带来两个方面的影响 下面将具体说明这几个都使用场景和解决的问题 React前端渲染优化--父组件导致子组件重复渲染 说明 目前我们所使用 react 版本一般会有以下四种方式触发渲染 render,而其中通过父组件 render 会直接通知子

  • Vue中父组件向子组件通信的方法

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

  • 详解vue2父组件传递props异步数据到子组件的问题

    测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de

  • react 父组件与子组件之间的值传递的方法

    概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但

  • react 中父组件与子组件双向绑定问题

    在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr

随机推荐