<p>J'utilise le composant basé sur les classes de React pour afficher d'abord tous les jetons. Ensuite, je souhaite afficher deux textes avec spanid en même temps, quel que soit l'ordre, en utilisant les boutons précédent et suivant pour restituer la page. Il y aura n*(n-1) possibilités pour restituer la page. En effet, le premier texte avec un espagnol sera associé au deuxième texte avec un autre espagnol, jusqu'au n-1ème jeton avec un espagnol. Pour n morceaux de texte avec spanid, la page peut être restituée n*(n-1) fois à l'aide des boutons précédent/suivant. Puisque j'écris du code en utilisant les composants basés sur les classes de React, je ne sais pas comment gérer cela en utilisant useState et les accessoires comme je le ferais dans une configuration fonctionnelle. Toute aide sur ce problème est grandement appréciée. </p> <pre class="brush:php;toolbar:false;">importer React depuis 'react'; importer './App.css'; enregistrement const = [ { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Nom" }, { "tid": 2, "token_text": "est" }, { "tid": 3, "token_text": "le" }, { "tid": 4, "token_text": "nom scientifique", "spanid": 2, "label": "type de nom" }, { "tid": 5, "token_text": "de" }, { "tid": 6, "token_text": "dog", "spanid": 3, "label": "species" }, { "tid": 7, "token_text": "." } ]; La relation de classe étend React.Component { const input_tokens = enregistrement ; var cntr = 200 ; input_tokens.forEach(tk => { const span = tk['spanid']; if (!tk['spanid']) { tokens_to_render.push( <clé 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> ); } autre { tokens_to_render.push( <clé div = {`id${cntr}`} > <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div> <div key={cntr} identifiant = {`span${cntr}`} index={tk['spanid']} > {tk['token_text']} </div> </div> ); } ; centre = centre + 1 ; }); retour ( <div key="externe" > <div key="id" className="control-box"> {tokens_to_render} </div> </div> ) } } exporter la relation par défaut ;</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>;
    }
}