ScrollableInkTabBar support render props to customize tab node

[zombieJ]

ref: ant-design/ant-design#9990

Support react-dnd wrapper:

<Tabs
  renderTabBar={() => (
    <ScrollableInkTabBar>
      {this.renderTabBarNode}
    </ScrollableInkTabBar>
  )}
  {...otherProps}
>
  {children}
</Tabs>

[afc163]

直接用 ScrollableInkTabBar 的 children 呢，现在的 API 看着实在是太纠结了。

[zombieJ]

直接用 ScrollableInkTabBar 的 children 呢，现在的 API 看着实在是太纠结了。

ScrollableInkTabBar 内部结构是这样的：

<SaveRef>
  {(saveRef, getRef) => (
    <TabBarRootNode saveRef={saveRef} {...this.props}>
      <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
        <TabBarTabsNode saveRef={saveRef} {...this.props} />
        <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
      </ScrollableTabBarNode>
    </TabBarRootNode>
  )}
</SaveRef>

我们要包的 TabNode 在 TabBarTabsNode 内部：

<div ref={saveRef('navTabsContainer')}>
  {/* panels.map => <div role="tab" /> */}
</div>

如果通过 children 调用的话，需要用户知道内部结构是什么。而且层级挺深的，有点黑魔法的意思。不如直接给个接口让用户可以控制 node 来的清晰。

[afc163]

<Tabs renderTabBar={() => <ScrollableInkTabBar renderTabBarNode ...

[picodoth]

for antd purpose, this looks great. But should we consider to add the same functionality on other type of tabbar node?