How to use useState in the tab page in antd react
P粉930448030
P粉930448030 2023-08-13 10:13:16
0
1
417
<p>类型 'readonly [{ readonly key: "1"; readonly label: "Tab 1"; readonly children: "Content of Tab Pane 1"; }, { readonly key: "2"; readonly label: "Tab 2"; readonly children: "Content of Tab Pane 2"; }, { ...; }]' 是 'readonly' 类型,不能赋值给可变类型 'Tab[]'。ts(4104)</p> <pre class="brush:php;toolbar:false;">import React, { useState } from "react"; import "./index.css"; import { Tabs } from "antd"; import type { TabsProps } from "antd"; const items: TabsProps["items"] = [ { key: "1", label: `Tab 1`, children: `Content of Tab Pane 1` }, { key: "2", label: `Tab 2`, children: `Content of Tab Pane 2` }, { key: "3", label: `Tab 3`, children: `Content of Tab Pane 3` } ] as 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} />; }; export default App;</pre> <p>https://codesandbox.io/s/basic-antd-5-8-3-forked-p9myfs?file=/demo.tsx:0-706</p>
P粉930448030
P粉930448030

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!