Question

您如何包装前向引用组件？

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

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组件时，似乎就无法正确识别ref

Answer 1

如果要返回包装的组件，则还必须使用forwardRef()并设置ref属性来转发其引用。以上面的示例为例：

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

如何用HOC包装forwardRef组件？

1 个答案: