React中如何向子组件传递ref？代码示例及空ref问题求解

你的实现思路是可行的，但代码中存在语法错误和时机问题，导致ref为空。以下是具体问题和修复方法：

1. Input组件的语法错误 #

你错误地在forwardRef后多写了一个=>，导致组件定义完全失效。正确的forwardRef组件结构应该是将组件逻辑直接放在forwardRef的回调函数中。

2. Form组件的语法错误 #

Children.map的回调函数没有闭合，缺少})，导致JSX解析失败。

3. ref的打印时机错误 #

你在组件函数体直接打印ref，此时组件还未完成挂载，ref.current还未被赋值。必须在组件挂载完成后（通过useEffect钩子）才能获取到有效的ref引用。

4. Input组件缺少渲染内容 #

你的Input组件没有返回任何JSX元素，useImperativeHandle需要配合组件的实际渲染内容才能生效，至少要返回一个基础DOM元素。

修复后的完整代码 #

import React, { Children, createRef, forwardRef, useImperativeHandle, useEffect } from "react";

const Form = ({ children }) => {
  const ref = createRef();
  
  // 组件挂载后再访问ref
  useEffect(() => {
    console.log("ref: ", ref);
    // 调用子组件暴露的自定义方法
    if (ref.current) {
      console.log("自定义方法返回值:", ref.current.getCustomAttr());
    }
  }, []);

  return (
    <>
      {Children.map(children, (child) => {
        return React.cloneElement(child, { ...child.props, ref });
      })}
    </>
  );
};

const Input = forwardRef((props, ref) => {
  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    getCustomAttr() {
      return "example";
    },
  }));

  // 返回实际的输入元素
  return <input type="text" {...props} />;
});

// 使用示例
export default function App() {
  return (
    <Form>
      <Input />
    </Form>
  );
}

修复后说明 #

• 修正了forwardRef的语法，确保Input组件能正确接收父组件传递的ref。
• 通过useEffect在组件挂载完成后访问ref，此时ref.current已经指向Input组件暴露的方法集合。
• Input组件添加了实际的<input>元素，保证组件正常渲染，useImperativeHandle能正确绑定ref。

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