Aktualisieren Sie die React-Seite in der klassenbasierten Komponente, ohne useState zu verwenden.

Question

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.

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;

Answer 1

Translation: 像useState这样的Hooks只能在函数组件中使用。要在类组件中使用状态：

• 从render()方法中返回要显示的JSX。
• 将初始状态赋值给state属性。
• 调用this.setState来更新状态。

例如：

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