useState를 사용하지 않고 클래스 기반 구성 요소의 React 페이지를 업데이트합니다.

Question

저는 모든 토큰을 먼저 표시하기 위해 React의 클래스 기반 구성요소를 사용하고 있습니다. 그런 다음 이전 및 다음 버튼을 사용하여 페이지를 다시 렌더링하여 순서에 관계없이 동시에 두 개의 텍스트를 spaid로 표시하고 싶습니다. 페이지를 다시 렌더링할 수 있는 가능성은 n*(n-1)개입니다. 이는 스페인어가 포함된 첫 번째 텍스트가 다른 스페인어가 포함된 두 번째 텍스트(최대 n-1번째 토큰까지)와 쌍을 이루기 때문입니다. spanid가 포함된 n개 텍스트의 경우 이전/다음 버튼을 사용하여 페이지를 n*(n-1)번 다시 렌더링할 수 있습니다. 저는 React의 클래스 기반 구성 요소를 사용하여 코드를 작성하고 있기 때문에 기능 설정에서처럼 useState와 props를 사용하여 이를 처리하는 방법을 잘 모르겠습니다. 이 문제에 대한 도움을 주시면 대단히 감사하겠습니다.

'react'에서 React를 가져옵니다.
import './App.css';

const 레코드 = [
  { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "이름" },
  { "tid": 2, "token_text": "is" },
  { "tid": 3, "token_text": "the" },
  { "tid": 4, "token_text": "과학적인 이름", "spanid": 2, "label": "이름 유형" },
  { "tid": 5, "token_text": "of" },
  { "tid": 6, "token_text": "dog", "spanid": 3, "label": "종" },
  { "tid": 7, "token_text": "."
];

클래스 관계는 React.Component를 확장합니다.
const input_tokens = 기록;
var cntr = 200;

   input_tokens.forEach(tk => {
       const 스팬 = tk['spanid'];
       if (!tk['spanid']) {
           tokens_to_render.push(
            <div 키= {`id${cntr}`} >
               <div id = {`label${cntr}`} className='no-label' key={tk.tid}>--</div>
               <div 키={cntr} id = {`span${cntr}`} 인덱스={tk['spanid']} >
                   {tk['token_text']}
              </div>
            </div>
          );
          
       } 또 다른 {
          tokens_to_render.push(
            <div 키 = {`id${cntr}`} >
              <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div>
              <div
                키={cntr} id = {`span${cntr}`}
                인덱스={tk['spanid']}
              >
                  {tk['token_text']}
              </div>
            </div>
          );
       };
       cntr = cntr + 1;
  });
반품 (
        <div key="외부" >
          <div key="id" className="control-box">
             {tokens_to_render}
             
      </div>

    </div>
  )
}
  }
기본 관계 내보내기;

Answer 1

번역: useState와 같은 후크는 함수 구성요소에서만 사용할 수 있습니다. 클래스 구성 요소에서 상태를 사용하려면:

• render() 메서드에서 표시할 JSX를 반환합니다.
• 상태 속성에 초기 상태를 할당합니다.
• 상태를 업데이트하려면 this.setState를 호출하세요.

예:

으아아아