Rele useRef Hook带有流类型

问题描述 投票:1回答:2

[我正在使用带有Flow类型的React useRef,并且我试图为第三方Web组件库编写包装器组件。

Web组件需要一个changeCallback函数,我正在使用ref将其分配给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流的属性会引发错误。

由于handleChange中缺少属性ref.current.changeCallback,因此无法将changeCallback分配给[C0

我尝试使用此类属性扩展“ ElementType”

HTMLElement

但是这导致以下错误:

无法实例化ElementRef<ElementType & { changeCallback: Function }> ,因为对象类型[1]不是React组件。

Web组件不会在更改时触发“更改”事件。它执行功能changeCallback。这是该库的文档。

ElementRef
reactjs react-hooks web-component flowtype
2个回答
0
投票

我相信您需要使用// 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)} /> // ... } } 将回调附加到Web组件:

addEventListener

0
投票

解决方案是使用带有显式类型参数的useRef来表示所需的类型:

if (ref.current) ref.current.addEventListener('change', onChange);
© www.soinside.com 2019 - 2024. All rights reserved.