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

Question

タイプ 'readonly [{ readonly key: "1";読み取り専用ラベル: "タブ 1"; readonly の子: "タブ ペイン 1 の内容"; }, {読み取り専用キー: "2";読み取り専用ラベル: "タブ 2"; readonly の子: "タブ ペイン 2 の内容"; }、{ ...; }]' は 'readonly' タイプであり、可変タイプ 'Tab[]' を評価できません。ts(4104)

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} />;
};

デフォルトのアプリをエクスポート;

https://codesandbox.io/s/basic-antd-5-8-3-forked-p9myfs?file=/demo.tsx:0-706

Answer 1

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