reactjs - 'Element | 类型的参数 null' 不可分配给“元素 |”类型的参数 虚拟元素'

Question

在尝试使用 popper 组件时遇到以下错误，只是在努力理解如何正确键入它。文档不清楚，我也没有太多 Typescript 经验。

'Element | 类型的参数 null' 不可分配给“元素 |”类型的参数 虚拟元素'。类型 'null' 不能分配给类型 'Element | VirtualElement'.ts(2345) 常量爆米花：元素 | 无效的

const popcorn = document.querySelector('#popcorn')
const tooltip = document.querySelector('#tooltip')

createPopper(popcorn, tooltip, {
  placement: 'top',
})

标签： reactjstypescript

Answer 1

该createPopper功能要确保popcorn并且tooltip两者实际上都是元素。由于querySelector可以返回（如果没有元素存在） ，只需在调用它们之前null检查以确保它们不为空。popcorntooltipcreatePopper

const popcorn = document.querySelector('#popcorn')
const tooltip = document.querySelector('#tooltip')

if (popcorn && tooltip) {
  createPopper(popcorn, tooltip, { placement: 'top' })
}