Comment utiliser useState dans la page à onglet dans antd React

Question

类型 'lecture seule [{ clé en lecture seule : "1" ; étiquette en lecture seule : « Onglet 1 » ; enfants en lecture seule : « Contenu du volet d'onglet 1 » ; }, { clé en lecture seule : "2" ; étiquette en lecture seule : « Onglet 2 » ; enfants en lecture seule : « Contenu du volet d'onglets 2 » ; }, {... ; }]' est 'readonly' 类型，不能赋值给可变类型 'Tab[]'。ts(4104)

importer React, { useState } depuis "react" ;
importer "./index.css" ;
importer des {onglets} depuis "antd" ;
importer le type { TabsProps } depuis "antd" ;

const éléments : TabsProps["éléments"] = [
  {
    clé : "1",
    étiquette : `Onglet 1`,
    enfants : `Contenu du volet d'onglet 1`
  },
  {
    touche : "2",
    étiquette : `Onglet 2`,
    enfants : `Contenu du volet d'onglets 2`
  },
  {
    touche : "3",
    étiquette : `Onglet 3`,
    enfants : `Contenu du volet d'onglets 3`
  }
] comme const;
tapez ArrKey = type d'éléments[numéro]["clé"];

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

  const onChange = (clé : chaîne) => {
    setIndex(clé);
  } ;

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

exporter l'application par défaut ;

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

Answer 1

Salut, j'espère avoir bien compris votre problème J'ai résolu votre problème ici https://codesandbox.io/s/basic-antd-5-8-3-forked-7m8jhc?file=/demo .tsx