Question

我正在定制 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

Answer 1

这不是默认的反应行为，但似乎是蚂蚁设计对 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>

Answer 2

问题解决了。这并不明显，但 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

覆盖自定义组件属性

2 个答案: