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>
  );
};
相关推荐
一条上岸小咸鱼4 分钟前
Kotlin 基本数据类型(五):Array
android·前端·kotlin
大明887 分钟前
用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave
前端·javascript
小杨梅君9 分钟前
vue3+vite中使用自定义element-plus主题配置
前端·element
一个专注api接口开发的小白14 分钟前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
前端·数据挖掘·api
林太白14 分钟前
Nuxt.js搭建一个官网如何简单
前端·javascript·后端
晴空雨15 分钟前
一个符号让 indexOf 判断更优雅!JavaScript 位运算的隐藏技巧
前端·javascript
摸着石头过河的石头15 分钟前
前端调试全攻略:从PC到移动端的一站式实战指南
前端·debug
小猪猪屁17 分钟前
🚀 用 Nuxt3 打造公司官网:一场从 0 到 1 的实战冒险
前端
傅里叶33 分钟前
Flutter在OrangePi 5 Plus上视频播放锁死问题
前端·flutter
古夕1 小时前
my-first-ai-web_问题记录03——NextJS 项目框架基础扫盲
前端·javascript·react.js