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