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>
  );
};
相关推荐
@cc小鱼仔仔11 分钟前
vue 知识点
前端·javascript·vue.js
特级业务专家13 分钟前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js
|晴 天|17 分钟前
Monorepo 实战:使用 pnpm + Turborepo 管理大型项目
前端
ByteCraze17 分钟前
如何处理大模型幻觉问题?
前端·人工智能·深度学习·机器学习·node.js
fruge18 分钟前
技术面试复盘:高频算法题的前端实现思路(防抖、节流、深拷贝等)
前端·算法·面试
Mike_jia21 分钟前
LoggiFly:开源Docker日志监控神器,实时洞察容器健康的全栈方案
前端
风语者日志23 分钟前
CTFSHOW菜狗杯—WEB签到
前端·web安全·ctf·小白入门
276695829229 分钟前
最新 _rand 分析
前端·javascript·数据库·node·rand·231滑块·_rand分析
一 乐29 分钟前
宠物医院预约|宠物医院|基于SprinBoot+vue的宠物医院预约管理系统源码+数据库+文档)
java·前端·数据库·vue.js·后端·springboot
v***56531 分钟前
分布式WEB应用中会话管理的变迁之路
前端·分布式