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>
  );
};
相关推荐
雨季6662 分钟前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
小北方城市网13 分钟前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')24 分钟前
vue2 使用高德接口查询天气
前端·vue.js
2401_8920005225 分钟前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马379833 分钟前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上10241 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js
qx091 小时前
esm模块与commonjs模块相互调用的方法
开发语言·前端·javascript
Mr Xu_2 小时前
前端实战:基于Element Plus的CustomTable表格组件封装与应用
前端·javascript·vue.js·elementui
0思必得02 小时前
[Web自动化] 爬虫之API请求
前端·爬虫·python·selenium·自动化
混迹在开发队伍里的伪开发2 小时前
css的var用法,定义属性,全局使用
前端·css