Реагируйте на использование Ref Hook с Flow Typings

Question

Я использую React useRef с типами потока и пытаюсь написать компонент-оболочку для сторонней библиотеки веб-компонентов.

Веб-компонент ожидает функцию changeCallback, и я использую refприсвоить его ссылке.

function RadioButtonGroup({ onChange, children }) {
    const ref: { current: null | ElementRef<ElementType> = React.useRef(null);

    React.useEffect(() => {
        if (ref.current) ref.current.changeCallback = onChange;
    }, [onChange]);

    return <web-component ref={ref}>{children}</web-component>
}

Поскольку HTMLElement не содержит свойство с именем changeCallback flow, выдает ошибку.

Невозможно присвоить handleChange ref.current.changeCallback, поскольку свойствоchangeCallback отсутствует в HTMLElement

Я попытался расширить "ElementType" с помощью свойства, подобного этому

ElementRef<ElementType & { changeCallback: Function }>

Но это приводит к следующей ошибке:

Невозможно создать экземпляр ElementRef, так как тип объекта [1] не является компонентом React.

Веб-компонент не запускает событие "change" при изменении.Выполняет функцию changeCallback.Вот документация для библиотеки.

// MyComponent.js

class MyComponent extends Component {

    constructor() {
        // ...

        // Create a ref
        this.sdxSelectEl = React.createRef();
    }

    componentDidMount() {
        // Attach callback here to ref
        this.sdxSelectEl.selectCallback = (selection) => console.log(selection);
    }

    render() {
        // ...
        <sdx-select ref={el => (this.sdxSelectEl = el)} />
        // ...
    }
}

Answer 1

Решение состоит в том, чтобы вызвать useRef с явным аргументом типа для представления ожидаемого типа:

const ref = React.useRef<null | (HTMLElement & { changeCallback: Function })>(null);

Answer 2

Полагаю, вам нужно использовать addEventListener для прикрепления обратного вызова к веб-компоненту:

if (ref.current) ref.current.addEventListener('change', onChange);