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

思路说明:

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

相关推荐
中微子5 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina8 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码1 小时前
1.
react.js·node.js·angular.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js