Comments (2)
复现demo
export const Test111 = () => {
const [num, setNum] = useState(6);
const [tabList, setTabList] = useState([
{ tab: '文档', itemKey: '1', text: '文档', closable: true },
{ tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
{ tab: '帮助', itemKey: '3', text: '帮助',closable: true },
{ tab: '文档1', itemKey: '4', text: '文档4', closable: true },
]);
const close = useCallback((key) => [
setTabList((tabList => {
return tabList.filter(t=>t.itemKey!==key)
}))
], []);
const add = useCallback(() => {
setNum((num) => num+1);
setTabList((tabList => {
return [...tabList,
{
tab: `文档${num +1}`,
itemKey: `${num +1}`,
text: `文档${num +1}`,
closable: true,
}
]
}))
}, [num])
return (
<>
<Button onClick={add}>新增</Button>
<Tabs type="card" defaultActiveKey="1" onTabClose={close} collapsible style={{ width: 400 }}>
{
tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
}
</Tabs>
</>
);
}
from semi-design.
@YannLynn 有空 cc
from semi-design.
Related Issues (20)
- [BUG] ESM support for @semi/next
- [BUG] Breadcrumb组件会提示Warning: findDOMNode is deprecated in StrictMode警告 HOT 1
- [DatePicker] 交互设计优化 HOT 1
- [BUG] Slider 被整体 transform scale 后,把手定位不准 HOT 2
- [Table] 支持第三方滚动条插件 HOT 6
- [BUG] Form 组件在 strict & development 下调用 validate() 没有返回 HOT 1
- [Cascader] React18.2.0, 受控 Cascader,异步加载数据时,展开不符合预期
- [Button] 如何组合Tooltip使用 HOT 3
- [BUG] 组件<Popover /> 随着浏览器窗口的 缩小而不见了
- [BUG] firefox dark mode not working HOT 3
- [BUG] <title>我想修改主题里面的'height-control-large该如何修改? HOT 1
- Select组件在ios模式下点击摊开会一闪一闪,弹窗打开有点不是很流畅 HOT 8
- [Pagination] 总页数过大情况下出现出现页码挤压
- [BUG] Table rowSelection getCheckboxProps should not return object contains checked or defaultChecked
- [Tree] icon 支持传入 (props)=>ReactNode HOT 1
- [BUG] Tabs collapsible 模式下,通过修改 activeKey 切换 tab 时不会将选中的 tab 出来 HOT 1
- nextjs use client HOT 5
- nextjs layout fc with semi layout conflict
- Nav.Header. logo support static files(images) ? HOT 1
- [BUG] NextJs 最新版 Form表单无法执行表单规则校验 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from semi-design.