React中如何向子组件传递多个Ref？求更优实现方案

你当前将多个Ref封装为对象通过forwardRef传递的方案是可行的，但还有几种更符合React设计习惯的实现方式，以下是具体建议：

方案1：直接通过Props传递（推荐） #

当需要将父组件的Ref传递给子组件使用时，直接通过普通Props传递是最直观的方式，无需借助forwardRef（forwardRef更多用于子组件向父组件暴露自身内部元素/实例的场景）。

代码示例：

import React from "react";

// Parent component
function App() {
  const inputRef = React.useRef();
  const btnRef = React.useRef();

  return (
    <div>
      <input ref={inputRef} />
      <button ref={btnRef}>click me</button>
      {/* 直接作为props传递 */}
      <ChildComponent inputRef={inputRef} btnRef={btnRef} />
    </div>
  );
}

// Child component
const ChildComponent = (props) => {
  // 直接从props中获取ref
  // console.log(props.inputRef, props.btnRef)

  return <>This is Child Component</>;
};

export default App;

方案2：使用useImperativeHandle（适用于子组件暴露多个内部Ref给父组件） #

如果你的场景是子组件内部有多个DOM元素/实例，需要让父组件直接操作，可以结合forwardRef和useImperativeHandle，将多个子组件内部的Ref统一暴露为一个对象，父组件只需维护一个Ref即可。

代码示例：

import React, { useRef, forwardRef, useImperativeHandle } from "react";

// Parent component
function App() {
  const childRefs = useRef();

  const handleOperateChild = () => {
    // 调用子组件暴露的方法或访问内部元素
    childRefs.current.focusInput();
    childRefs.current.clickBtn();
  };

  return (
    <div>
      <button onClick={handleOperateChild}>操作子组件元素</button>
      <ChildComponent ref={childRefs} />
    </div>
  );
}

// Child component
const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef();
  const btnRef = useRef();

  // 向父组件暴露指定的方法或Ref
  useImperativeHandle(ref, () => ({
    focusInput: () => inputRef.current.focus(),
    clickBtn: () => btnRef.current.click(),
    // 也可以直接暴露ref对象
    inputRef: inputRef,
    btnRef: btnRef
  }));

  return (
    <>
      <input ref={inputRef} placeholder="子组件输入框" />
      <button ref={btnRef} onClick={() => alert("子组件按钮被点击")}>子组件按钮</button>
    </>
  );
});

export default App;

方案3：保留对象封装传递（优化版） #

如果你坚持使用forwardRef传递多个Ref，可以优化命名让语义更清晰，同时确保子组件明确接收这个Ref对象：

import React from "react";

function App() {
  const inputRef = React.useRef();
  const btnRef = React.useRef();

  return (
    <div>
      <input ref={inputRef} />
      <button ref={btnRef}>click me</button>
      {/* 明确命名ref对象 */}
      <ChildComponent ref={{ parentInputRef: inputRef, parentBtnRef: btnRef }} />
    </div>
  );
}

const ChildComponent = React.forwardRef((props, ref) => {
  // 解构获取更清晰
  const { parentInputRef, parentBtnRef } = ref;
  return <>This is Child Component</>;
});

export default App;

总结 #

• 如果是父组件向子组件传递自身的Ref：优先选择方案1（Props传递），语义清晰且符合React常规用法；
• 如果是子组件向父组件暴露多个内部元素：选择方案2（useImperativeHandle），能更好地控制暴露的内容，避免直接暴露整个组件内部结构；
• 方案3可作为当前实现的优化版，但仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者Aegon