So verwenden Sie useState auf der Registerkartenseite in Antd React

Question

类型 'readonly [{ readonly key: "1"; schreibgeschütztes Label: „Tab 1“; schreibgeschützte Kinder: „Inhalt von Registerkarte 1“; }, { schreibgeschützter Schlüssel: "2"; schreibgeschütztes Label: „Tab 2“; schreibgeschützte Kinder: „Inhalt von Registerkarte 2“; }, { ...; }]' oder 'readonly' 类型,不能赋值给可变类型 'Tab[]'。ts(4104)

import React, { useState } from "react";
import „./index.css“;
{ Tabs } aus „antd“ importieren;
Importtyp { TabsProps } von „antd“;

const items: TabsProps["items"] = [
  {
    Schlüssel: „1“,
    Beschriftung: „Tab 1“,
    Kinder: „Inhalt von Registerkarte 1“.
  },
  {
    Schlüssel: „2“,
    Beschriftung: „Tab 2“,
    Kinder: „Inhalt von Registerkarte 2“.
  },
  {
    Schlüssel: „3“,
    Beschriftung: „Tab 3“,
    Kinder: „Inhalt von Registerkarte 3“.
  }
] als const;
type ArrKey = typeof items[number]["key"];

const App: React.FC = () => {
  const [index, setIndex] = useState<ArrKey>("1");

  const onChange = (key: string) => {
    setIndex(key);
  };

  return <Tabs activeKey={index} items={items} onChange={onChange} />;
};

Standard-App exportieren;

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