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>
  );
};
相关推荐
竹林81813 小时前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript
之歆13 小时前
DAY08_CSS浮动与行内块布局实战指南(上)
前端·css
light blue bird13 小时前
主子端台二分法任务汇总组件
前端·数据库·.net·桌面端winform
jeffwang14 小时前
我做了个让 AI 看屏幕跑测试的工具,因为 Playwright 测不了我的 Flutter Web
前端
HSunR15 小时前
dify 搭建ai作业批改流
开发语言·前端·javascript
代码不加糖15 小时前
2026 跨境电商独立站实战:从 0 到 1 搭建高转化 SaaS 商城(附源码)
开发语言·前端·javascript
亲亲小宝宝鸭15 小时前
拖一拖控件,拖出个问卷(低代码平台)
前端·低代码
江南十四行15 小时前
ReAct Agent 基本理论与项目实战(一)
前端·react.js·前端框架
We་ct16 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·leetcode·typescript·动态规划
小呆呆66616 小时前
Codex 穷鬼大救星
前端·人工智能·后端