Antd React의 탭 페이지에서 useState를 사용하는 방법

Question

类型 '읽기 전용 [{ 읽기 전용 키: "1"; 읽기 전용 라벨: "탭 1"; 읽기 전용 하위: "탭 창 1의 내용"; }, { 읽기 전용 키: "2"; 읽기 전용 라벨: "탭 2"; 읽기 전용 하위: "탭 창 2의 내용"; }, { ...; }]' 是 '읽기 전용' 类型,不能赋值给可变类型 'Tab[]'。ts(4104)

"react"에서 React, { useState } 가져오기;
import "./index.css";
"antd"에서 { 탭 }을 가져옵니다.
"antd"에서 가져오기 유형 { TabsProps };

const 항목: TabsProps["items"] = [
  {
    키: "1",
    라벨: `탭 1`,
    하위: `탭 창 1의 내용`
  },
  {
    키: "2",
    라벨: `탭 2`,
    어린이: `탭 창 2의 내용`
  },
  {
    키: "3",
    라벨: `탭 3`,
    어린이: `탭 창 3의 내용`
  }
] const로;
type ArrKey = 항목 유형[번호]["key"];

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

  const onChange = (키: 문자열) => {
    setIndex(키);
  };

  return <Tabs activeKey={index} 항목={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