cari

Rumah  >  Soal Jawab  >  teks badan

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

<p>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. </p> <pre class="brush:php;toolbar:false;">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;</pre> <p><br /></p>
P粉739886290P粉739886290557 hari yang lalu695

membalas semua(1)saya akan balas

  • P粉413307845

    P粉4133078452023-08-04 14:14:29

    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>;
        }
    }

    balas
    0
  • Batalbalas