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

思路说明:

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

相关推荐
Simon_He21 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子2 小时前
智能前端实践之 shot-word demo
前端
归于尽2 小时前
智能前端小魔术,让图片开口说单词
前端·react.js