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 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom