类型错误：无法读取“null”的属性“querySelector”

如何解决类型错误：无法读取“null”的属性“querySelector”

我正在尝试在本地创建一个简单的 Javascript 计算器来响应。到目前为止，我的代码如下，我遇到的错误如下：

TypeError: Cannot read property 'querySelector' of null
App
src/App.js:6
  3 | 
  4 | function App() {
  5 |   const calculator = document.querySelector('.calculator')
> 6 |   const keys = calculator.querySelector('.calculator__keys')
  7 | 
  8 |   keys.addEventListener('click',e => {
  9 |     if (e.target.matches('button')) {

我正在寻找有关为什么 querySelector 出现为 null 的一些见解。或者更具体地说，为什么 '.calculator' 和 '.calculator__keys' 没有为 querySelector 函数提供任何信息。这可能是与我的 CSS 相关的问题，还是我的代码中存在我不知道的语法错误？

This is my updated GitHub repo in case you would like to take a look at my CSS as well.

import './App.css';
import './calculator.css'

function App() {
  const calculator = document.querySelector('.calculator')
  const keys = calculator.querySelector('.calculator__keys')

  keys.addEventListener('click',e => {
    if (e.target.matches('button')) {
      const key = e.target
      const action = key.dataset.action

    if (!action) {
      console.log('number key!')
    }
    if (
      action === 'add' ||
      action === 'subtract' ||
      action === 'multiply' ||
      action === 'divide'
    ) {
      console.log('operator key!')
    }
    if (action === 'decimal') {
      console.log('decimal key!')
    }
    if (action === 'clear') {
      console.log('clear key!')
    }
    if (action === 'calculate') {
      console.log('equal key')
    }
  }})
  return (
    <div className='calculator'>
    <div className='calculator__display'>0</div>
    <div className='calculator__keys'>
    <button id='add'className='key--operator' data-action='add'>+</button>
    <button id='subtract' className='key--operator' data-action='subtract'>-</button>
    <button id='multiply' className='key--operator' data-action='multiply'>&times;</button>
    <button id='divide' className='key--operator' data-action='divide'>÷</button>
    <button id='seven'>7</button>
    <button id='eight'>8</button>
    <button id='nine' >9</button>
    <button id='four' >4</button>
    <button id='five' >5</button>
    <button id='six' >6</button>
    <button id='one' >1</button>
    <button id='two' >2</button>
    <button id='three'>3</button>
    <button id='zero' >0</button>
    <button id='decimal' data-action='decimal'>.</button>
    <button id='clear' data-action='clear'>AC</button>
    <button id='equals' className='key--equal' data-action='calculate'>=</button>



    </div>
    </div>
)}
export default App;

感谢您的帮助，谢谢。

解决方法

React 使用虚拟 DOM，当你渲染组件时，没有真正的 DOM，所以没有什么可以选择的。您可以使用 useRef 钩子选择元素。

例如;

function App() {

const calc = useRef(null)

 return (
    <div ref={calc} className='calculator'> )
}

在这种情况下，calc.current 将是所选元素。请登录控制台并检查自己。