[ffxixslh] React - 学习笔记 - Forward Refs

Refs 转发

转发 refs 到 DOM 组件

如果想在类组件中获取其子组件的 ref 时，可以通过 forwardRef() 高阶函数获取 React 传递给子组件的 ref ，然后转发到子组件渲染的 DOM botton:

import React, { forwardRef, createRef } from "react";

const FancyButton = forwardRef((props, ref) => { // (3)
  return (
    // (4)
    <button ref={ref} onClick={() => props.handleClick()}>
      {props.children}
    </button>
  );
});

const ButtonRef = createRef(null); // (1)

export default function FR() {
  const handleClick = () => {
    console.log(ButtonRef.current); // (5)
  };
  return (
    // (2)
    <FancyButton ref={ButtonRef} handleClick={handleClick}> 
      click me
    </FancyButton>
  );
}

以下是对上述示例发生情况的逐步解释：

1. 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
2. 我们通过指定 ref 为 JSX 属性，将其向下传递给 <FancyButton ref={ref}>。
3. React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。
4. 我们向下转发该 ref 参数到 <button ref={ref}>，将其指定为 JSX 属性。
5. 当 ref 挂载完成，ref.current 将指向 <button> DOM 节点。

在高阶组件中转发 refs