React使用forwardRef时如何实现不传ref参数也能正常运行？

forwardRef 包裹的组件未传入 ref 时，第二个入参的默认值为 null，直接对 null 做对象解构就会抛出空对象访问错误。另外你原有组件的参数写法存在问题：forwardRef 的第二个入参是完整的 ref 实例/对象，不能直接在参数位解构，需要先接收完整 ref 参数后再处理。

所有优化都可以在自定义组件内部完成，不需要调用方手动传空 ref 兼容。

方案1：给ref参数设置默认空对象 #

直接在组件定义层给 ref 参数设置默认值为空对象，后续解构时就不会出现访问 null 属性的问题：

// 修改后的组件定义
const CustomComp = React.forwardRef((props, ref = {}) => {
  const { ref1, ref2 } = ref;
  // 原有业务逻辑保持不变
});

该方案适配所有调用场景，无论是否传ref、传的是自定义ref对象还是普通ref实例都不会报错。

方案2：解构时做空值兜底 #

如果不想修改参数默认值，也可以在解构操作前加空值判断兜底：

const CustomComp = React.forwardRef((props, ref) => {
  // ref为假值时兜底到空对象
  const { ref1, ref2 } = ref || {};
  // 原有业务逻辑保持不变
});

如果需要更严谨的兼容，还可以给单个ref属性设置默认值：

// 示例：给ref1、ref2设置默认空函数兜底，避免后续调用报错
const { ref1 = () => {}, ref2 = () => {} } = ref || {};

两种方案都不需要修改上层调用代码，场景2直接写 <CustomComp/> 即可正常运行。

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