React 中出现“无法读取 null 的属性‘classList’”错误

Question

我构建了一个石头/剪刀/布 React 应用程序。该应用程序运行良好，但我只是想添加一个功能。当用户或 CPU 获胜时，我想向获胜的特定元素添加一个特定的类 (.bigger)。例如，在下面的代码中，当用户通过选择纸张获胜时，我尝试添加 .bigger 类，但应用程序崩溃了。 if(this.state.victory === true) {                if(this.state.choiceName === "paper") {                    document.getElementById("paper-box").classList.add("bigger")                } }我收到以下错误：“无法读取 null 的属性‘classList’”。为什么会这样？我怎样才能实现我想要的？预先非常感谢您。https://codesandbox.io/s/lively-smoke-7z7ej?file=/src/components/Main.js

Answer 1

可能的原因（您没有在问题本身中包含mcve ）是您在搜索 DOM 时尚未使用该 ID 渲染该元素。

---

一般来说，在使用 React 时，您不应该直接访问 DOM。

您的渲染函数应该负责确定输出。

...
<span id="paper-box" className={ this.state.choiceName === "paper" ? "bigger" : "" }>
...