一、父组件的操作: 利用useRef创建一个ref实例,并将其赋值给shareRef变量。通过指定ref为JSX属性,将其向下传递给 <Child ref={shareRef}/>
父组件的主要代码:
import React, {useRef} from 'react';
const parent = (props) = {
const shareRef = useRef();
return (
<div>
//子组件
<Child ref={shareRef}/>
</div>
)
}
export default Parent;
二、子组件的操作:
1.react传递ref给forwardRef内函数(props, ref) => ....,作为其第二个参数
2.使用useImperativeHandle把父组件需要调用的方法暴露出来
子组件的主要代码:
import React, { forwardRef, useImperativeHandle } from 'react';
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
handleShareSubmit,
resetSharePopup,// 这里运用了es6的简写ÿ