在基於類別的元件中更新React頁面而不使用useState。

Question

我正在使用React的基於類別的元件來首先顯示所有的令牌。然後，我想要同時顯示兩個帶有spanid的文本，不考慮順序，使用上一個和下一個按鈕來重新渲染頁面。重新渲染頁面將有 n*(n-1) 種可能性。這是因為第一個帶有spanid的文字將與第二個帶有另一個spanid的文字配對，直到第n-1個帶有spanid的令牌。對於有spanid的n個文本，可以使用上一個/下一個按鈕重新渲染頁面n*(n-1)次。由於我正在使用React的基於類別的元件編寫程式碼，我不確定如何像在函數式設定中那樣使用useState和props來處理這個問題。非常感謝任何關於此問題的幫助。

import React from 'react';
import './App.css';

const record = [
  { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Name" },
  { "tid": 2, "token_text": "is" },
  { "tid": 3, "token_text": "the" },
  { "tid": 4, "token_text": "scientific name", "spanid": 2, "label": "name type" },
  { "tid": 5, "token_text": "of" },
  { "tid": 6, "token_text": "dog", "spanid": 3, "label": "species" },
  { "tid": 7, "token_text": "." }
];

class Relation extends 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>
          );
          
       } else {
          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;
  });
return (
        <div key="outer" >
          <div key="id" className="control-box">
             {tokens_to_render}
             
      </div>

    </div>
  ）
}
  }
導出預設關係；

>

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