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>
  );
};
相关推荐
lifewange11 小时前
UI自动化页面元素定位有几种方式
前端·ui·自动化
牛奶11 小时前
2026 春涧·前端走向全栈
前端·人工智能·全栈
Piper蛋窝11 小时前
AI 有你想不到,也它有做不到 | 2025 年深度使用 Cursor/Trae/CodeX 所得十条经验
前端·后端·代码规范
LYFlied12 小时前
WebAssembly为何能实现极致性能:从设计原理到执行优势
前端·wasm·跨端
释怀不想释怀12 小时前
vue布局,动态路由
前端·html
桜吹雪13 小时前
Vue 基础:状态管理入门
前端·vue.js
JavaGuide13 小时前
利用元旦假期,我开源了一个大模型智能面试平台+知识库!
前端·后端
yuanyxh14 小时前
程序设计
前端·设计
eason_fan14 小时前
前端性能优化利器:LitePage 轻量级全页设计解析
前端·性能优化·前端工程化
pe7er15 小时前
如何阅读英文文档
java·前端·后端