如何使用 HOC 包装forwardRef 组件？

Question

如何包装forwardRef 组件？

例如，在我的单元格编辑器中：

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

export default forwardRef((props, ref) => {
    const inputRef = useRef();
    const { someProp } = props;
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return inputRef.current.value;
            }
        };
    });
    return <input type="text" ref={inputRef} someProp={someProp}/>;
})

如果我想向 HOC 公开一个变量 (someProp)，我该怎么做呢？

function someProps(WrappedComponent, someProp) {
    return (props) => <WrappedComponent {...props} someProp={someProp}/>
}

someProps(CellEditor, {propName: propValue});

每当我尝试包装forwardedRef组件时，看起来引用都没有被正确识别

Answer 1

如果您要返回包装的组件，那么您还必须通过使用forwardRef()和设置refprop 来转发其引用。以你上面的例子为例：

function someProps(WrappedComponent, someProp) {
  return forwardRef((props, ref) => (
    <WrappedComponent {...props} ref={ref} someProp={someProp} />
  ));
}