日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用useImperativeHandle時父組件第一次沒拿到子組件的問題_React

作者：daoke_li ? 更新時間： 2022-10-03 編程語言

用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的橋梁就這樣就可以在父組件中控制子組件了，而不僅僅只是子隨父渲染了。?

原文鏈接：https://blog.csdn.net/daoke_li/article/details/125497743

欄目分類
最近更新