在基于类的组件中更新React页面而不使用useState。
<p>我正在使用React的基于类的组件来首先显示所有的令牌。然后,我想要同时显示两个带有spanid的文本,不考虑顺序,使用上一个和下一个按钮来重新渲染页面。重新渲染页面将有 n*(n-1) 种可能性。这是因为第一个带有spanid的文本将与第二个带有另一个spanid的文本配对,直到第n-1个带有spanid的令牌。对于带有spanid的n个文本,可以使用上一个/下一个按钮重新渲染页面n*(n-1)次。由于我正在使用React的基于类的组件编写代码,我不确定如何像在函数式设置中那样使用useState和props来处理这个问题。非常感谢任何关于此问题的帮助。</p>
<pre class="brush:php;toolbar:false;">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>
)
}
}
导出默认关系;</pre>
<p><br />></p>