ホームページ  >  に質問  >  本文

Antd ReactのタブページでuseStateを使用する方法

<p>タイプ 'readonly [{ readonly key: "1";読み取り専用ラベル: "タブ 1"; readonly の子: "タブ ペイン 1 の内容"; }, {読み取り専用キー: "2";読み取り専用ラベル: "タブ 2"; readonly の子: "タブ ペイン 2 の内容"; }、{ ...; }]' は 'readonly' タイプであり、可変タイプ 'Tab[]' を評価できません。ts(4104)</p> <pre class="brush:php;toolbar:false;">import React, { useState } from "react"; インポート "./index.css"; 「antd」から { タブ } をインポートします。 「antd」からタイプ { TabsProps } をインポートします。 const items: TabsProps["items"] = [ { キー: "1"、 ラベル: `タブ 1`、 子: `タブ ペイン 1 の内容` }、 { キー: "2"、 ラベル: `タブ 2`、 子: `タブ ペイン 2 の内容` }、 { キー: "3"、 ラベル: `タブ 3`、 子: `タブ ペイン 3 の内容` } ] を const として指定します。 type ArrKey = アイテムの種類[数値]["キー"]; const アプリ: React.FC = () => { const [index, setIndex] = useState<ArrKey>("1"); const onChange = (キー: 文字列) => { setIndex(キー); }; return <Tabs activeKey={index} items={items} onChange={onChange} />; }; デフォルトのアプリをエクスポート;</pre> <p>https://codesandbox.io/s/basic-antd-5-8-3-forked-p9myfs?file=/demo.tsx:0-706</p>
P粉930448030P粉930448030456日前583

全員に返信(1)返信します

  • P粉191610580

    P粉1916105802023-08-14 09:30:46

    こんにちは、あなたの問題を正しく理解できたことを願っています 私はあなたの問題を修正しました ここで https://codesandbox.io/s/basic-antd-5-8-3-forked-7m8jhc?file =/demo.tsx

    返事
    0
  • キャンセル返事