静态网站开发,如何进入设计公司网站,网页编辑字体加粗代码,网站网页设计工作内容前有访问单个子组件的需求#xff0c;现在进一步需要访问循环渲染中的子组件。 访问单个子组件的成员
实施步骤
子组件//child.tsx
export declare type ChildInstance{childMethod:()void
}
const Child(props:{value:stringonMounted?:(ref:ChildInstance)void
…前有访问单个子组件的需求现在进一步需要访问循环渲染中的子组件。 访问单个子组件的成员
实施步骤
子组件//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 childRefsuseRef{[key:number]:ChildInstance}({})function handleChildMounted(ref:ChildInstance,value:number){childRefs.current[value]ref}function randomCallChild(){const valuegetRandomWithRange(1,5)const childchildRefs.current[value]child.childMethod()}return (divh1这是父组件/h1button onClick{randomCallChild}随机访问一个子组件/buttonbr/以下是循环渲染的子组件{list.map(value(Child key{value} value{value} onMounted{ehandleChildMounted(e,value)}/))}/div)
}
export default Parent思路说明: 在子组件中通过初始化事件将内部的引用传递给外面外面通过这个引用访问子组件的内部。
