react中forwardRef的使用方法

在React中,forwardRef函数用于将ref属性转发给子组件。这样,父组件就可以直接操作子组件的ref

以下是使用forwardRef的示例:

javascript 复制代码
import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 子组件的逻辑和 JSX
  return <input ref={ref} />;
});

const ParentComponent = () => {
  const inputRef = React.useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};
相关推荐
Devin_chen4 分钟前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基5 分钟前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript
peachSoda713 分钟前
前端想转AI全栈-初步练习记录
前端·人工智能
树上有只程序猿14 分钟前
低代码平台选型指南,10 款热门工具对比
前端·后端
@PHARAOH15 分钟前
WHAT - 硬链接 hard link 和软链接 symlink
前端
cyforkk26 分钟前
前端限流实战:从 429 状态码处理到消除“双重报错”
前端·状态模式
陈林梓43 分钟前
Qiankun 微前端配置详解
前端
英俊潇洒美少年1 小时前
Vue3 的 JSX 函数组件,每次更新都会重新运行吗?
前端·javascript·vue.js
木斯佳1 小时前
前端八股文面经大全:腾讯前端暑期AI面(2026-03-26)·面经深度解析
前端·人工智能·ai·智能体·暑期实习