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>
  );
};
相关推荐
凉生阿新19 小时前
【React】从零配置 Git Hooks:提交前自动校验与格式化(Vite + React 19)
前端·git·react.js
英俊潇洒美少年19 小时前
Vue3 为什么不做 Fiber / 并发渲染?
前端·javascript·vue.js
早已忘记20 小时前
CI相关项
java·前端·ci/cd
freewlt1 天前
前端性能优化实战:从 Lighthouse 分数到用户体验的全面升级
前端·性能优化·ux
小小亮011 天前
Next.js基础
开发语言·前端·javascript
华洛1 天前
我用AI做了一个48秒的真人精品漫剧,不难也不贵
前端·javascript·后端
Novlan11 天前
我把 Claude Code 里的隐藏彩蛋提取出来了——零依赖的 ASCII 虚拟宠物系统
前端
IAUTOMOBILE1 天前
Python 流程控制与函数定义:从调试现场到工程实践
java·前端·python
好大哥呀1 天前
C++ Web 编程
开发语言·前端·c++
爱学习的小仙女!1 天前
面试题 前端(一)DOCTYPE作用 标准模式与混杂模式区分
前端·前端面试题