如何制作一个呈现 Ant Design TabPanes 数组的 React.FC？

Question

So, I'm trying to render some Tabs from Ant Design (Using 3.x here, as in my real app, but I bet it's exactly the same in 4.x ) that I need to reuse in different parts of my App. Some of these tabs depend on dynamic data that comes from an schema retrieved by an API. Depending on that data the content of the tabs changes, or maybe some of the tabs don't even render.

Long story short, I've tried to simplify my use case with this snippet. I want to have a <DynamicTabPanes /> component that given the required data is able to handle the logic and return the needed TabPanes .

Apparently, Ant Design doesn't like this. If I use my component like:

<Tabs>
  <DynamicTabPanes data={someApiData} />
</Tabs>

I get these errors:

There must be tab property on children of Tabs.

But, of course , if I provide a key and a tab property to my component, antd renders it as if it was a simple TabPane . See:

 const { Tabs } = antd; const { TabPane } = Tabs; const DynamicTabPanes = ({data}) => { return data.map((tab, index) => <TabPane tab={tab.label} key={index}>{tab.content}</TabPane>) } const someApiData = [{label: "First", content: "First Content"}, {label: "Second", content: "Second Content"}]; ReactDOM.render( <Tabs> <TabPane key="static-1" tab="Static Tab">Some static content</TabPane> <DynamicTabPanes data={someApiData} key="whatever" tab="I don't want this title..."/> </Tabs>, document.getElementById('root') );

 <link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd.css" rel="stylesheet"/> <div id="root"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd-with-locales.js" crossorigin="anonymous"></script>

I (kind of) made it work using a function instead of a FC, like this:

 const { Tabs } = antd; const { TabPane } = Tabs; const renderDynamicTabPanes = (data) => { return data.map((tab, index) => <TabPane tab={tab.label} key={index}>{tab.content}</TabPane>) } const someApiData = [{label: "First", content: "First Content"}, {label: "Second", content: "Second Content"}]; ReactDOM.render( <Tabs> <TabPane key="static-1" tab="Static Tab">Some static content</TabPane> {renderDynamicTabPanes(someApiData)} </Tabs>, document.getElementById('root') );

 <link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd.css" rel="stylesheet"/> <div id="root"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd-with-locales.js" crossorigin="anonymous"></script>

But this doesn't seem like a good solution because:

1. React should be about Components, not interpolation.
2. <DynamicTabPanes /> needs to use some hooks and you cannot use them in a function that is not a FC.

Any ideas on how to make this work? Thanks!

Answer 1

Ok, I have made some investigation, so we have the following:

1. Ant-design uses Tabs and TabPane from 'rc-tabs' and all the logic related to tab rendering is located there github src
2. Tabs as wrapper component is responsible for rendering its children components. You can check that Tabs component iterates over it's immediate children in the parseTabList function src . And it detects your DynamicTabPanes component as a single component. Then Tabs component basing on the array of immediate children creates Navigation items TabNavList and Content Panels List TabPanelList (so the number of tabs will match the number of immediate children, which is two in your example).
3. So the answer is no, you cannot put your custom component instead of few other elements. As far as I know, you cannot substitute one element with few elements before they have been rendered.

You can create your own pane like below and use your hooks there (it gone be separate hook for each pane):

const CustomPane = (props) => {
  if (!props.active) {
    return <div></div>;
  }
  return (
    <Fragment>
       My custom tab
      <TabPane {...props}>{props.children}</TabPane>
    </Fragment>
  );
};

You can do something like in the code below, but it is just another way to do the same as you did. You can also replace staticPanel with an array of configs for static panels and concat it with dynamic and then make the mapping.

const DynamicTabPanes = (staticPanes, data) => {
  return staticPanes.concat(
    data.map((tab, index) => (
      <TabPane tab={tab.label} key={index}>
        {tab.content}
      </TabPane>
    ))
  );
};

function App() {
  const someApiData = [
    { label: "First", content: "First Content" },
    { label: "Second", content: "Second Content" },
  ];

  const staticPanes = [
    <TabPane key="static-1" tab="Static Tab">
      Some static content
    </TabPane>,
  ];

  return (
    <div className="App">
      <Tabs children={DynamicTabPanes(staticPanes, someApiData)} />
    </div>
  );
}

export default App;

Hope it will clarify a little bit the context of the issue.