如何使用 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}/>;
})

如果我想将内部变量 (someProp) 公开给 HOC，我该怎么做？

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

someProps(CellEditor, {propName: propValue});

每当我尝试包装 forwardedRef 组件时，似乎没有正确识别 ref

Answer 1

如果您要返回一个包装组件，那么您还必须通过使用 forwardRef() 并设置 ref 属性来转发它的引用。以上面的例子：

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

如何使用 HOC 包装 forwardRef 组件？

How do you wrap a forwardRef component with a HOC?

reactjs

ag-grid

ag-grid-react