React函数组件，不能直接将 ref 属性传递给组件，需要使用 React.forwardRef 来包裹组件以支持 ref

最新推荐文章于 2025-07-21 09:38:50 发布

原创最新推荐文章于 2025-07-21 09:38:50 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

博客直接展示代码，涉及前端领域，运用了 JavaScript 和 React.js 相关技术。

直接上代码

import React, { useRef } from 'react';

const MyComponent = () => {
  const myComponentRef = useRef(null);

  const handleClick = () => {
    myComponentRef.current.myMethod();
  };

  return (
    <div>
      <button onClick={handleClick}>调用组件方法</button>
      <ChildComponent ref={myComponentRef} />
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  const myMethod = () => {
    console.log('调用了组件方法');
  };

  React.useImperativeHandle(ref, () => ({
    myMethod,
  }));

  return <div>子组件</div>;
});

export default MyComponent;