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>
  );
};
相关推荐
zhanlang021714 分钟前
HTML 零基础入门到企业实战全套教程【连载 5.3】audio、video 音频视频标签|兼容格式、自动播放踩坑、企业规范
前端·html
qq_406981031 小时前
c++ lamda(三)Lambda表达式
java·前端·c++
zhanlang02171 小时前
HTML 零基础入门到企业实战【第五章 5.4】内嵌网页 iframe 标签:嵌入网页、视频、地图实战
前端·html·音视频
2分钟速写快排9 小时前
孔乙己的茴字有多少种写法?|AI 对话实时通信的三种实现
前端·javascript·github
Penge66611 小时前
JavaScript:BOM 详解
前端
Penge66611 小时前
Vite vs Webpack:前端构建工具原理与实战
前端
Penge66611 小时前
前端包管理工具:npm、Yarn、pnpm 快速入门
前端
Penge66612 小时前
Sass 了解
前端
Penge66612 小时前
Webpack 打包从 0 到 1 实战笔记
前端
Penge66612 小时前
Webpack 入门:是什么、为什么需要、怎么使用?
前端