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

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