Antd React의 탭 페이지에서 useState를 사용하는 방법
P粉930448030
2023-08-13 10:13:16
<p>类型 '읽기 전용 [{ 읽기 전용 키: "1"; 읽기 전용 라벨: "탭 1"; 읽기 전용 하위: "탭 창 1의 내용"; }, { 읽기 전용 키: "2"; 읽기 전용 라벨: "탭 2"; 읽기 전용 하위: "탭 창 2의 내용"; }, { ...; }]' 是 '읽기 전용' 类型,不能赋值给可变类型 'Tab[]'。ts(4104)</p>
<pre class="brush:php;toolbar:false;">"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} />
};
기본 앱 내보내기;</pre>
<p>https://codesandbox.io/s/basic-antd-5-8-3-forked-p9myfs?file=/demo.tsx:0-706</p>
안녕하세요, 문제를 올바르게 이해했기를 바랍니다 문제를 해결했습니다 여기서 https://codesandbox.io/s/basic-antd-5-8-3-forked-7m8jhc?file=/demo .tsx