网站开发规划教育网站开发

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

实施步骤

子组件//child.tsx

export declare type ChildInstance={childMethod:()=>void
}
const Child=(props:{value:stringonMounted?:(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

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