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

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

实施步骤

子组件//child.tsx

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

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

思路说明:

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