React.forwardRef

最新推荐文章于 2025-07-21 09:38:50 发布

原创最新推荐文章于 2025-07-21 09:38:50 发布 · 412 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

收录于

本文解释了React.forwardRef的作用，它是如何让函数式组件接受和利用refs，以及通过实例化`PasscodeInput`组件展示如何在父组件中使用forwardRef来传递ref并操作内部元素。

React.forwardRef是一个函数，它允许你将refs转发给函数式组件的内部元素。在React中，ref通常是在类组件中使用的特殊属性，它提供了对DOM节点或React元素的引用。然而，在函数式组件中，无法直接访问refs。

React.forwardRef函数接收一个渲染函数作为参数，并返回一个能够接收ref的函数式组件。这样，父组件就可以将ref传递给函数式组件，然后函数式组件可以选择性地将这个ref绑定到内部的某个元素上。

例如：

// 子组件
import React from 'react';
const PasscodeInput = memo(
  React.forwardRef(({ onChange }, ref) => {


    useImperativeHandle(ref, () => ({

      changeInput: (val) => {
        changeHandle(val); 
      },

      // 暴露给父组件，获取焦点时间
      getFocus: () => {
        inputRef.current.focus();
      },
    }));
}


//父组件
import PasscodeInput from './PasscodeInput'

const BindPhone = ({ navigation, route }) => {

     const Passcode = useRef(null)
      // Passcode.current.getFocus()   调用子组件的方法
      
    return (<PasscodeInput onChange={getCode} ref={Passcode} />)
})