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