Tabs and CustomTabPane

Hello,

Sorry I’m not a chinese speaking user and sorry this is not really an issue. I’d like to know if it is possible to pass a custom TabPane to Tabs instead of a TabPane component.

Exemple:

Classic:

import {Tabs} from 'antd';
const TabPane = Tabs.TabPane;

    <Tabs defaultActiveKey='1' animated={false}>
        <TabPane key={'1'} tab={<h4>One title</h4>}>
                {some components that use props my_prop}
        </TabPane>
        <TabPane key={'2'} tab={<h4>Another title</h4>}>
                {some components that use props my_prop}
        </TabPane>
    </Tabs>;

What I try to achieve:

import {Tabs} from 'antd';
const TabPane = Tabs.TabPane;

     const CustomTabPane = ({key, my_prop, title}) =>
        <TabPane key={key} tab={<h4>{title}</h4>}>
                {some components that use props my_prop}
        </TabPane>;

    <Tabs defaultActiveKey='1' animated={false}>
        <CustomTabPane key={'1'} my_prop={a} title="One title"/>
        <CustomTabPane key={'2'} my_prop={b} title="Another Title"/>
    </Tabs>;

The second Option does not display a thing. What should I add for using a custom component for Tabs to be able to render my CustomTabPane?

Thank you,

[GuillaumeCisco]

@paranoidjk Doing what you’re suggesting is not a good practice. React is about components and thinking with components. Not using interpolation hack everywhere… Also it will break rendering performance optimization. With this code, you cannot use shouldComponentUpdate and avoid some rendering. It’s a huge no no.

Last thing, using high ordering component is very used in real life. You can for example write:

import {Tabs} from 'antd';
const TabPane = Tabs.TabPane;

const NestedComponent1 = ({my_prop}) => <div>1 {my_prop}</div>
const NestedComponent2 = ({my_prop}) => <div>2 {my_prop}</div>

const HOC = (Component) =>
     const CustomTabPane = ({key, my_prop, title}) =>
        <TabPane key={key} tab={<h4>{title}</h4>}>
                <Component my_prop={my_prop} />
        </TabPane>;

     return CustomTabPane;

const TabPane1 = HOC(NestedComponent1);
const TabPane2 = HOC(NestedComponent2);

ReactDOM.render(
    <Tabs defaultActiveKey='1' animated={false}>
        <TabPane1 key={'1'} my_prop={a} title="One title"/>
        <TabPane2 key={'2'} my_prop={b} title="Another Title"/>
    </Tabs>
, mountNode);

It allows us to completely control each component and its render cycle. It is easier to read and to understand. Using composition allow to change one of the component in the chain list and using the other. Overriding only the component we want. For example in a case of the html tag table, we know we can have a tbody, tr, td. If we define a component for each of these html tag based on our needs and use them. Further in the project we want to use them but with a different implementations of tr for example. High ordering component composition allow you to only change this particular component thanks to … composition. Code will look this way const CustomTable = TableHOC(TableBodyHOC(MyNewTrHOC(Td))), and then pass your props to CustomTable like you normally do. This is extremely powerful and reliable.

I don’t know what’s going on with the current implementation of antd and customs TabPane not being recognized by Tabs… Not even a single error message is thrown… We can see the same use case with Material UI and Table component, it expects Tbody and Thead components. But you can use a custom component by adding it a muiName for making it works… I was looking for this kind of answer posting this issue.

I don’t have the correct rights to reopen this issue. But one thing sure, this is not solved yet…

[paranoidjk]

@GuillaumeCisco you just need to do this, pass down all restProps

const HOC = (Component) => {
     const CustomTabPane = ({key, my_prop, title, ...restProps}) =>
        <TabPane key={key} tab={<h4>{title}</h4>} {...restProps}>
                <Component my_prop={my_prop} />
        </TabPane>;

     return CustomTabPane;
}