useState を使用せずにクラスベースのコンポーネントの React ページを更新します。

Question

<p>React のクラスベースのコンポーネントを使用して、最初にすべてのトークンを表示します。次に、順序に関係なく、spanid を含む 2 つのテキストを同時に表示したいと思います。前へおよび次へのボタンを使用してページを再レンダリングします。ページを再レンダリングする可能性は n*(n-1) 通りあります。これは、spanid を持つ最初のテキストが、別の spaid を持つ 2 番目のテキストと、spanid を持つ n-1 番目のトークンまでペアになるためです。 spaid を持つ n 個のテキストの場合、前/次ボタンを使用してページを n*(n-1) 回再レンダリングできます。 React のクラスベースのコンポーネントを使用してコードを作成しているため、関数セットアップの場合のように useState と props を使用してこれを処理する方法がわかりません。この問題に関するご支援をいただければ幸いです。 </p> <pre class="brush:php;toolbar:false;">React を 'react' からインポートします。 './App.css' をインポートします。 定数レコード = [ { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "名前" }, { "tid": 2, "token_text": "は" }, { "tid": 3, "token_text": "the" }, { "tid": 4, "token_text": "学名", "spanid": 2, "label": "名前の種類" }, { "tid": 5, "token_text": "の" }, { "tid": 6, "token_text": "犬", "spanid": 3, "label": "種" }, { "tid": 7, "token_text": "." } ]; class Relation extends React.Component { const input_tokens = レコード; var cntr = 200; input_tokens.forEach(tk => { const スパン = 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> ); } それ以外 { tokens_to_render.push( <div キー = {`id${cntr}`} > <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div>

{tk['token_text']} </div> </div> ); }; cntr = cntr 1; }); 戻る （ <div key="外側" > <div key="id" className="コントロールボックス"> {レンダリングするトークン} </div> </div> ) } } デフォルトの関係をエクスポート;</pre> <p><br /></p>

1

0

0

P粉739886290

返事

全員に返信(1)

返信します 近い

P粉4133078452023-08-04 14:14:29 1棟

翻訳: useState のようなフックは、関数コンポーネントでのみ使用できます。クラスコンポーネントで状態を使用するには:

• render() メソッドから表示される JSX を返します。
• 初期状態を state 属性に割り当てます。
• this.setState を呼び出してステータスを更新します。 ＃＃＃＃＃＃＃＃＃＃＃＃例えば：＃＃＃＃＃＃＃＃＃＃＃＃ リーリー

いいねを押す +0

返信を追加 关闭回复

P粉739886290

返事

Answer 1

翻訳: useState のようなフックは、関数コンポーネントでのみ使用できます。クラスコンポーネントで状態を使用するには:

• render() メソッドから表示される JSX を返します。
• 初期状態を state 属性に割り当てます。
• this.setState を呼び出してステータスを更新します。 ＃＃＃＃＃＃＃＃＃＃＃＃例えば：＃＃＃＃＃＃＃＃＃＃＃＃ リーリー