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" : "" }> ...