react经验11:访问循环渲染的子组件内容

前有访问单个子组件的需求,现在进一步需要访问循环渲染中的子组件。
访问单个子组件的成员

实施步骤

子组件//child.tsx

ts 复制代码
export declare type ChildInstance={
	childMethod:()=>void
}
const Child=(props:{
	value:string
	onMounted?:(ref:ChildInstance)=>void
})=>{
	function childMethod(){
		console.log(`子组件-${props.value}的函数被访问了`)
	}
	useEffect(()=>{
		if (props.onMounted) {
            props.onMounted({
                childMethod
            })
        }
	},[])
	return (
		<div>这是子组件-{props.value}</div>
	)
}
export default Child

父组件//parent.tsx

ts 复制代码
function getRandomWithRange(minNum: number, maxNum: number) {
    return Math.floor(Math.random() * (maxNum - minNum + 1) + minNum)
}
const list=[1,2,3,4,5]
const Parent=()=>{
	const childRefs=useRef<{[key:number]:ChildInstance}>({})
	function handleChildMounted(ref:ChildInstance,value:number){
		childRefs.current[value]=ref
	}
	function randomCallChild(){
		const value=getRandomWithRange(1,5)
		const child=childRefs.current[value]
		child.childMethod()
	}
	return (
		<div>
			<h1>这是父组件</h1>
			<button onClick={randomCallChild}>随机访问一个子组件</button><br/>
			以下是循环渲染的子组件
			{
				list.map(value=>(
					<Child key={value} value={value} onMounted={e=>handleChildMounted(e,value)}/>
				))
			}
		</div>
	)
}
export default Parent

思路说明:

在子组件中通过初始化事件将内部的"引用"传递给外面,外面通过这个"引用"访问子组件的内部。

相关推荐
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css