如何在 React 类组件中基于一次两个带有 spanid 的标记重新渲染页面

问：

我有一个记录数据，其中某些令牌具有spanid。我首先想在令牌具有标记时显示所有标记以及标签名称，并且这部分将始终保留或重新呈现。在所有标记下方，我想一次显示两个带有spanid的标记，就像第一个带有spanid的标记与第二个标记一样，第一个带有第三个标记,...首先是第 n 个令牌,......第 n 个令牌和 （n-1） 个令牌。因此，在上一个和下一个按钮的帮助下，页面将能够重新呈现 n*（n-1） 次。在附加数据的情况下，有三个带有spaninds的标记;因此，在所有令牌下方，将首先显示第一个令牌和第二个带有 spanid 的令牌，在点击下一个按钮时，将出现第一个带有 spanid 的令牌，然后是第二个带有第一个令牌，第二个带有第三个，第三个带有第一个，最后，第三个带有第二个。点击上一个按钮将返回到上一个案例。我可以执行显示所有标记的第一部分，但我需要一些帮助来使用上一个和下一个按钮重新呈现页面，其中页面可以重新呈现 n*（n-1） 次，同时考虑一次使用两个带有 spanid 的标记。我附加了代码的第一部分，其中显示了各种令牌。我感谢对下一部分的任何帮助。

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;