Question

我正在使用带有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分配给HTMLElement

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

ElementRef<ElementType & { changeCallback: Function }>

但这会导致以下错误：

由于对象类型[1]不是React组件，因此无法实例化ElementRef。

Web组件不会在更改时触发“更改”事件。它执行功能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

我相信您需要使用addEventListener将回调附加到Web组件：

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

Answer 2

解决方案是使用显式类型参数调用useRef来表示期望的类型：

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

使用flow打字反应useRef Hook

2 个答案: