react使用ref调用子组件的方法

Class类组件

import React, { useRef } from 'react';const MyComponent = () => {const myComponentRef = useRef(null);const handleClick = () => {// 调用MyComponent组件的方法myComponentRef.current.myMethod();};return (<div><MyComponent ref={myComponentRef} /><button onClick={handleClick}>Call MyComponent Method</button></div>);
};class MyComponent extends React.Component {myMethod() {console.log('MyComponent method called');}render() {return <div>MyComponent</div>;}
}

在上面的示例中，我们首先创建了一个ref，命名为myComponentRef。然后，在MyComponent组件上使用ref={myComponentRef}将ref绑定到该组件上。接下来，我们在父组件中定义了一个点击事件处理函数handleClick，当点击按钮时，会调用myComponentRef.current.myMethod()来调用MyComponent组件的myMethod方法。

需要注意的是，在函数组件中使用ref时，需要使用useRef钩子。而在类组件中，可以直接使用React.createRef()来创建ref。

函数式组件

import React, { useRef, useImperativeHandle, forwardRef } from 'react';const MyFunctionalComponent = forwardRef((props, ref) => {const myMethod = () => {console.log('MyFunctionalComponent method called');};useImperativeHandle(ref, () => ({myMethod}));return <div>My Functional Component</div>;
});const ParentComponent = () => {const functionalComponentRef = useRef(null);const handleClick = () => {// 调用函数式组件的方法functionalComponentRef.current.myMethod();};return (<div><MyFunctionalComponent ref={functionalComponentRef} /><button onClick={handleClick}>Call Functional Component Method</button></div>);
};

在上面的示例中，我们首先使用forwardRef函数包裹了函数式组件MyFunctionalComponent。在useImperativeHandle钩子中，我们将myMethod方法暴露给父组件通过ref进行调用。

然后，在父组件ParentComponent中，我们创建了一个ref，命名为functionalComponentRef。在MyFunctionalComponent组件上，我们将ref绑定到该组件上，通过ref={functionalComponentRef}。

最后，我们在handleClick点击事件处理函数中，通过functionalComponentRef.current.myMethod()来调用函数式组件的myMethod方法。

请注意，函数式组件本身不支持直接使用ref，需要借助forwardRef和useImperativeHandle来实现。这样，你就可以在函数式组件中使用ref获取到组件的方法，并进行相应的操作。