React useRef Hook with Flow Typings

Question

我正在使用带有流类型的 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 flow 的属性，因此会引发错误。

无法将handleChange分配给ref.current.changeCallback，因为HTMLElement中缺少属性changeCallback

我尝试使用这样的属性扩展"元素类型">

ElementRef<ElementType & { changeCallback: Function }>

但这会导致以下错误：

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

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

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

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

Answer 2

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

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