React 之 forwardRef用法(十六)

forwardRef 是 React 中的一个高级功能 ,它允许你将一个 ref 传递给子组件,即使该子组件是通过函数式组件定义的。这在某些情况下很有用,比如当你需要直接访问 DOM 元素或类组件的实例时。

vue则通过this.refs.XX或this.children访问子组件的Dom节点对象。

基本用法代码例子

javascript 复制代码
//FancyButton.js
import React, { forwardRef, useImperativeHandle, useRef } from 'react';  
//FancyButton 是一个函数式组件
//我们使用 useRef 钩子来创建一个 buttonRef,它将引用内部的 <button> 元素。然后,我们使用 //useImperativeHandle 钩子来定义 ref 的值,使其只暴露一个 focus 方法。
//这样,当外部组件通过 ref 访问 FancyButton 时,它们只能调用 focus 方法,
//而不能直接访问内部的 DOM 元素或组件状态。 
const FancyButton = forwardRef((props, ref) => {  
  const buttonRef = useRef();  
  
  //可以使用被称为命令式句柄(imperative handle) 
  //的自定义对象暴露一个更加受限制的方法集,而非整个 DOM 节点
  //**如果某个组件得到了 FancyButton  的 ref,则只会接收到 { focus } 对象**
  //**而非整个 DOM 节点。这可以让 DOM 节点暴露的信息限制到最小。**
  useImperativeHandle(ref, () => ({  
    focus: () => {  
      if (buttonRef.current) {  
        buttonRef.current.focus();  
      }  
    }  
  }));  
  return <button ref={buttonRef} {...props}>Click me</button>;  
});  

父组件:
// FancyButton 是一个函数式组件,我们通过 forwardRef 使其可以接受一个 ref
function App() {  
  const fancyButtonRef = React.createRef();  
  
  //handleClick 点击事件回调方法
  const handleClick = () => {  
  	//获取到子组件的Dom节点,并调用focus方法
    fancyButtonRef.current.focus();  
  };  
  
  return (  
    <div>  
      <FancyButton ref={fancyButtonRef} /> 
      <button onClick={handleClick}>Focus FancyButton</button>  
    </div>  
  );  
}  
  
export default App;
相关推荐
甜瓜看代码几秒前
1.
react.js·node.js·angular.js
伍哥的传说5 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091912 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding13 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜14 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD15 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding16 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子81628 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js