reactjs - 类型“ChildNode”类型脚本上不存在属性“样式”

Question

我有一个像下面这样的代码。它工作得很好，但 TypeScript 告诉我：“ChildNode”类型脚本上不存在属性“样式”。这个错误

  const allCoins = Array.from(document.querySelectorAll('li')))
  const xs = !useMediaQuery(theme.breakpoints.down('xs'))
  const md = !useMediaQuery(theme.breakpoints.down('sm'))

  allCoins.map((coins) => {
    if (coins.offsetHeight >= 53 && xs && !md) {
      allCoins.map((coin) => {
        coin.childNodes[0].childNodes[2].style.flex = '1 0 100%'
        coin.childNodes[0].childNodes[2].style.marginLeft = '-3px'
      })
    } else {
      allCoins.map((coin) => {
        coin.childNodes[0].childNodes[2].style.flex = 'unset' 
        coin.childNodes[0].childNodes[2].style.marginLeft = '0'
      })
    }
  })

我尝试了我在 Stack and Fit 上看到的所有解决方案，但没有一个适合我。

标签： reactjstypescriptdom

Answer 1

这个解决方案对我来说很完美:)

  const allCoins: HTMLElement[] = Array.from(document.querySelectorAll('li'))
  const xs = !useMediaQuery(theme.breakpoints.down('xs'))
  const md = !useMediaQuery(theme.breakpoints.down('sm'))

  allCoins.map((coins) => {
    if (coins.offsetHeight >= 53 && xs && !md) {
      allCoins.map((coin) => {
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.flex = '1 0 100%';
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.marginLeft = '-3px';
      })
    } else {
      allCoins.map((coin) => {
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.flex = 'unset';
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.marginLeft = '0';
      })
    }
  })