我正在定制 ant.design 的 Tabs 组件。我在道具方面遇到了一些困难,但我通过阅读解决了它: https://github.com/react-component/collapse/issues/73#issuecomment-323626120
但他们仍然无法自定义标签标题
<ContainerTabPane {...props} tab="custom title">
它应该覆盖选项卡属性。我做错了什么?
完整代码:
https://codesandbox.io/s/basic-antd4102-forked-1do70?file=/index.js
答案 0 :(得分:0)
这不是默认的反应行为,但似乎是蚂蚁设计对 Tabs
所做的“一些魔法”。它只是读取每个子组件接收并呈现为选项卡标题的 tab
道具。所以如果你用这个替换会得到类似的结果:
<Tabs defaultActiveKey="1" onChange={callback}>
<div tab="Tab 1" key="1">
Content of Tab Pane 1
</div>
<div tab="Tab 2" key="2">
Content of Tab Pane 2
</div>
<div tab="Tab 3" key="3">
Content of Tab Pane 3
</div>
答案 1 :(得分:0)
问题解决了。这并不明显,但 4853 的讨论帮助了我。
<ContainerTabs defaultActiveKey={defaultActiveKey} onChange={onChange}>
{children.map((child) => {
const { key, props } = child;
return (
<AntTabs.TabPane key={key} tab="custom title">
{props.children}
</AntTabs.TabPane>
);
})}
</ContainerTabs>
完整代码: https://codesandbox.io/s/basic-antd4102-forked-hx1gy?file=/index.js