Kemas kini halaman React dalam komponen berasaskan kelas tanpa menggunakan useState.

Question

Saya menggunakan komponen berasaskan kelas React untuk memaparkan semua token dahulu. Kemudian saya ingin memaparkan dua teks dengan spanyol pada masa yang sama, tanpa mengira susunannya, menggunakan butang sebelumnya dan seterusnya untuk memaparkan semula halaman. Akan ada n*(n-1) kemungkinan untuk memaparkan semula halaman. Ini kerana teks pertama dengan bahasa spanyol akan digandingkan dengan teks kedua dengan bahasa spanyol yang lain, sehingga token n-1 dengan spanyol. Untuk n keping teks dengan bahasa spanyol, halaman boleh dipaparkan semula n*(n-1) kali menggunakan butang sebelumnya/seterusnya. Memandangkan saya sedang menulis kod menggunakan komponen berasaskan kelas React, saya tidak pasti cara mengendalikannya menggunakan useState dan prop seperti yang saya lakukan dalam persediaan berfungsi. Sebarang bantuan dalam isu ini amat dihargai.

import React daripada 'react';
import './App.css';

rekod const = [
  { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Nama" },
  { "tid": 2, "token_text": "is" },
  { "tid": 3, "token_text": "the" },
  { "tid": 4, "token_text": "nama saintifik", "spanid": 2, "label": "jenis nama" },
  { "tid": 5, "token_text": "of" },
  { "tid": 6, "token_text": "anjing", "spanid": 3, "label": "spesies" },
  { "tid": 7, "token_text": "."
];

perhubungan kelas memanjangkan React.Component {
input_token const = rekod;
var cntr = 200;

   input_tokens.forEach(tk => {
       span const = tk['spanid'];
       jika (!tk['spanid']) {
           tokens_to_render.push(
            <kunci div= {`id${cntr}`} >
               <div id = {`label${cntr}`} className='no-label' key={tk.tid}>--</div>
               <div key={cntr} id = {`span${cntr}`} index={tk['spanid']} >
                   {tk['token_text']}
              </div>
            </div>
          );
          
       } lain {
          tokens_to_render.push(
            <kunci div = {`id${cntr}`} >
              <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div>
              <div
                key={cntr} id = {`span${cntr}`}
                index={tk['spanid']}
              >
                  {tk['token_text']}
              </div>
            </div>
          );
       };
       cntr = cntr + 1;
  });
kembali (
        <kunci div="luar" >
          <div key="id" className="control-box">
             {tokens_to_render}
             
      </div>

    </div>
  )
}
  }
eksport lalai Perhubungan;

Answer 1

Terjemahan: Cangkuk seperti useState hanya boleh digunakan dalam komponen fungsi. Untuk menggunakan keadaan dalam komponen kelas:

• Kembalikan JSX untuk dipaparkan daripada kaedah render().
• Tetapkan keadaan awal kepada atribut keadaan.
• Hubungi this.setState untuk mengemas kini status.

Contohnya:

class Example extends React.Component {
    state = {
        count: 0
    }
    
    render() {
        return <div>
            <button onClick={() => this.setState({count: this.state.count + 1})}>
                Increment count
            </button>
            <p>Clicked {this.state.count} times</p>
        </div>;
    }
}