如果不给使用forwardRef的RN组件传递ref会发生什么？

核心结论 #

父组件调用forwardRef包装的子组件时不传ref属于完全合法的使用方式，不会触发运行错误，你测试时的正常表现符合React的设计预期。

底层原理 #

• forwardRef的作用是将父组件传入的ref作为第二个参数透传给子组件的定义函数，若父组件未传入ref，该参数的值为undefined，属于合法的JavaScript值，不会触发参数缺失类报错
• React内部处理ref绑定时自动兼容空值：如果把undefined作为ref绑定到DOM元素或类组件上，React会直接忽略该值，不会抛出任何异常
• 仅当你在子组件逻辑中未做非空判断就直接访问ref.current的属性/方法时，才会出现Cannot read properties of undefined类报错，这类问题属于业务代码逻辑不严谨，和forwardRef本身的机制无关

示例参考 #

标准的forwardRef子组件天然兼容传/不传ref两种场景：

// 子组件定义
const CustomInput = React.forwardRef((props, ref) => {
  // 此处ref不管是正常传入的ref对象还是undefined，绑定都不会报错
  return <input type="text" ref={ref} {...props} />
})

// 父组件使用方式1：传ref
const inputRef = useRef(null)
<CustomInput ref={inputRef} placeholder="传ref的调用" />

// 父组件使用方式2：不传ref
<CustomInput placeholder="不传ref的调用" />

两种调用方式都可以正常运行，无需额外做兼容处理。

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