父组件:
import React, { createRef, useRef } from "react";
import Child from "./child";
const Parent = function () {
const childRef = useRef<any>(null);
const childRef = createRef<any>();
return (
<div>
<button
onClick={() => {
childRef.current.getData()
}}
>
获取子组件数据
</button>
<Child ref={childRef}></Child>
</div>
)
}
export default Parent;
子组件:
import React, { forwardRef, useImperativeHandle, useState } from "react";
const Child = forwardRef((props, ref) => {
const [childData] = useState<string>('test Data');
const getData = () => {
console.log(childData)
}
useImperativeHandle(ref, () => ({
getData
}))
return (
<div>
this is child component
</div>
)
})
export default Child;