Как обернуть компонент forwardRef с помощью HO C? - PullRequest
Новая
       41

Как обернуть компонент forwardRef с помощью HO C?

0 голосов
/ 09 июля 2020

Как вы go оборачиваете компонент 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) внутри для a HO C, как бы я go это сделал? 

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

someProps(CellEditor, {propName: propValue});

Каждый раз, когда я пытаюсь обернуть компонент forwardedRef, похоже, что ссылка не распознается правильно

1 Ответ

1 голос
/ 09 июля 2020

Если вы возвращаете завернутый компонент, вы также должны переслать его ссылку, используя forwardRef() и установив свойство ref. В приведенном выше примере: 

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