reactjsag-gridag-grid-react

How do you wrap a forwardRef component with a HOC?


How do you go about wrapping a forwardRef component?

For example, in my Cell Editor:

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}/>;
})

If I wanted to expose a variable (someProp) inside to a HOC, how would I go about doing that?

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

someProps(CellEditor, {propName: propValue});

Whenever I try to wrap a forwardedRef component, it looks like the ref isn't being recognized correctly


Solution

  • If you're returning a wrapped component, then you have to also forward its reference by using forwardRef() and setting the ref prop. Taking your example above:

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