在基于类的组件中不使用 useState 来响应重新渲染页面

Question

我首先使用基于 React 类的组件来显示所有令牌。然后，我想一次显示具有 spanids 的两个文本，而不考虑使用将重新呈现页面的上一个和下一个按钮的顺序。将有 n*(n-1) 种重新呈现页面的可能性。这是因为第一个带有 spanid 的文本将与第二个带有另一个 spanid 的文本到第 (n-1) 个带有 spanid 的标记的文本配对 (n-1) 次。对于带有 spanids 的 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>
  )
}
  }
export default Relation;

Answer 1

像

useState

这样的钩子仅与函数组件一起使用。使用带有状态的类组件：

• 从

  render()

  方法返回要显示的 JSX。
• 将初始状态分配给状态属性。
• 调用

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