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>