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>
  );
};
相关推荐
旺仔Sec2 小时前
2026年度河北省职业院校技能竞赛“Web技术”(高职组)赛项竞赛任务
运维·服务器·前端
用户4099322502122 小时前
Vue的Class绑定对象语法如何让动态类名切换变得直观高效?
前端·ai编程·trae
GIS之路3 小时前
GIS 数据转换:GDAL 实现将 CSV 转换为 Shp 数据(一)
前端
武清伯MVP3 小时前
深入了解Canvas:HTML5时代的绘图利器(一)
前端·html5·canvas
一水鉴天3 小时前
整体设计 定稿 之24 dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之1)
前端·html
_杨瀚博3 小时前
微信支付集成_JSAPI
前端
polaris_tl3 小时前
react beginwork
前端
亮子AI3 小时前
【css】列表的标号怎么实现居中对齐?
前端·css
梦想的旅途24 小时前
媒体文件(图片/文件)的上传与管理:获取 Media ID 的技术细节
前端·http·servlet
一水鉴天4 小时前
整体设计 定稿 之22 dashboard.html 增加三层次动态记录体系仪表盘 之1
前端·html