Saya telah membuat aplikasi React batu/kertas/gunting. Aplikasi ini berfungsi dengan baik tetapi saya hanya ingin menambahkan fitur.

Ketika pengguna atau CPU menang, saya ingin menambahkan kelas tertentu (.bigger) ke elemen tertentu yang menang.

Misalnya, dalam potongan kode berikut, saya mencoba menambahkan kelas .bigger ketika pengguna menang dengan memilih kertas, tetapi aplikasi macet.

 if(this.state.victory === true) {
                if(this.state.choiceName === "paper") {
                    document.getElementById("paper-box").classList.add("bigger")
                }
 }

Saya mendapatkan kesalahan berikut: "Tidak dapat membaca properti 'classList' dari null". Mengapa begitu? Dan bagaimana saya bisa mencapai apa yang saya inginkan?

Terima kasih banyak sebelumnya.

https://codesandbox.io/s/lively-smoke-7z7ej?file=/src/components/Main.js

0
zawrdo 19 November 2020, 14:53

1 menjawab

Jawaban Terbaik

Kemungkinan alasan (Anda tidak menyertakan mcve dalam pertanyaan itu sendiri) adalah karena Anda belum merender elemen dengan ID itu pada saat Anda mencari DOM untuk itu.


Secara umum, saat bekerja dengan React, Anda tidak harus mengakses DOM secara langsung.

Fungsi render Anda harus bertanggung jawab untuk menentukan output.

...
<span id="paper-box" className={ this.state.choiceName === "paper" ? "bigger" : "" }>
...
2
Quentin 19 November 2020, 12:04