HOC里怎么正确传递ref到被包装的组件？

利娜提问于 2026-03-12 23:06:29 阅读 5

框架

我写了个高阶组件用来加日志，但发现用React.forwardRef还是拿不到原始组件的ref，控制台报错说函数组件不能直接用ref。是不是HOC和forwardRef要一起用？具体该怎么写才对？

我试过这样写：

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('rendering', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const MyInput = withLogger(({ value }) => <input value={value} />);
// 使用时：const inputRef = useRef(); <MyInput ref={inputRef} />

我来解答赞 0 收藏

反馈

1 条解答

欧阳树潼 Lv1

函数组件要拿到ref必须用forwardRef包装，HOC的返回值本身也得是forwardRef。

function withLogger(WrappedComponent) {

  return React.forwardRef((props, ref) => {

    console.log('rendering', WrappedComponent.name);

    return <WrappedComponent {...props} ref={ref} />;

  });

}

这样ref就能穿透HOC传到最里面的MyInput了。

2026-03-12 23:09