ref 和 forwardRef

ref 和 forwardRef

问题描述

在开发react组件时，遇到以下报错：

解决方案

用 forwardRef 包装一层，如下：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

原因是 ref 无法通过 props 直接传递给组件，所以 react 提供了 forwardRef，将 ref 提取出来，供组件使用

参考链接