覆盖自定义零部件特性

Question

我正在对ant.design的Tabs组件进行自定义。我在使用道具时遇到了一些困难，但我通过阅读解决了这个问题：https://github.com/react-component/collapse/issues/73#issuecomment-323626120

但他们仍然在自定义选项卡标题方面遇到了问题

<ContainerTabPane {...props} tab="custom title">

它应该覆盖tab属性。我做错了什么？

完整代码：

https://codesandbox.io/s/basic-antd4102-forked-1do70?file=/index.js

Answer 1

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

Answer 2

这不是默认的react行为，但它似乎是ant设计对Tabs所做的“一些魔法”。它只是读取每个子组件接收并呈现为选项卡标题的tab属性。因此，如果替换为this，则会得到类似的结果：

  <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>