我正在使用带有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)} />
// ...
}
}
答案 0 :(得分:0)
我相信您需要使用addEventListener
将回调附加到Web组件:
if (ref.current) ref.current.addEventListener('change', onChange);
答案 1 :(得分:0)
解决方案是使用显式类型参数调用useRef来表示期望的类型:
const ref = React.useRef<null | (HTMLElement & { changeCallback: Function })>(null);