<p>Ich verwende die klassenbasierte Komponente von React, um zuerst alle Token anzuzeigen. Dann möchte ich zwei Texte mit spanid gleichzeitig anzeigen, unabhängig von der Reihenfolge, indem ich die Schaltflächen „Zurück“ und „Weiter“ verwende, um die Seite neu zu rendern. Es gibt n*(n-1) Möglichkeiten zum erneuten Rendern der Seite. Dies liegt daran, dass der erste Text mit einem Spanid mit dem zweiten Text mit einem anderen Spanid gepaart wird, bis zum n-1ten Token mit einem Spanid. Für n Textteile mit Spanid kann die Seite mithilfe der Schaltflächen „Zurück/Weiter“ n*(n-1) Mal neu gerendert werden. Da ich Code mit den klassenbasierten Komponenten von React schreibe, bin ich mir nicht sicher, wie ich damit mit useState und props umgehen soll, wie ich es in einem funktionalen Setup tun würde. Für jede Hilfe zu diesem Thema sind wir sehr dankbar. </p> <pre class="brush:php;toolbar:false;">import React from 'react'; import './App.css'; const-Datensatz = [ { „tid“: 1, „token_text“: „Canis Familiaris“, „spanid“: 1, „label“: „Name“ }, { "tid": 2, "token_text": "is" }, { "tid": 3, "token_text": "the" }, { „tid“: 4, „token_text“: „wissenschaftlicher Name“, „spanid“: 2, „label“: „Namenstyp“ }, { "tid": 5, "token_text": "of" }, { „tid“: 6, „token_text“: „dog“, „spanid“: 3, „label“: „species“ }, { "tid": 7, "token_text": "} ]; Klassenbeziehung erweitert React.Component { const input_tokens = record; var cntr = 200; input_tokens.forEach(tk => { const span = tk['spanid']; if (!tk['spanid']) { tokens_to_render.push( <div key= {`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> ); } anders { tokens_to_render.push( <div key = {`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; }); zurückkehren ( <div key="outer" > <div key="id" className="control-box"> {tokens_to_render} </div> </div> ) } } Standardbeziehung exportieren;</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>;
    }
}