自定义react Tab组件不接受“ dissabledTabs”道具

Question

I have created a tab component as follows:

tab/index.jsx

import React from 'react';
import TabHeader from './header';
import TabBody from './body';
import TabHeaderList from './header/list';
import TabBodyList from './body/list';
import style from './tab.css';

/**
 * Tabs are a great way to allow the user to switch between several pages that are full screen.
 */
export default class Tabs extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            currentTab: props.active || 0,
            disabledTabs: props.disabledTabs || []
        };
        this.ctx = {
            onChange: this.onChange
        };

        this.headerClick = this.headerClick.bind(this);
    }

    onChange(tab) {
        console.log('onChange: ', tab);
    }

    headerClick(e, onActivation, index){
        console.log("e:::::::::::::",e);
        e.stopPropagation();
        e.preventDefault();
        if(this.state.currentTab === index || this.state.disabledTabs.indexOf(index) !== -1) return false;
        let handled = null;
        if (onActivation) {
            handled = onActivation(index, this.state.currentTab);
        }
        if (handled) {
            e.preventDefault();
        } else {
            this.setState({currentTab: parseInt(index, 10)});
        }
    }

    render() {
        const type = this.props.type || 'default';
        let justified = this.props.align || '';
        if(justified === 'justified'){
            justified = 'flex1';
        }
        if(this.props.children.length !== 2) return null;

        const TabHeaderListTag = this.props.children[0];
        const TabBodyListTag = this.props.children[1];
        const {disabledTabs, currentTab } = this.state;

        console.log("---------------------");
        console.log(this.props);
        console.log("---------------------");
        console.log(this.state);
        console.log("---------------------");

        return (TabHeaderListTag.type === TabHeaderList && TabBodyListTag.type === TabBodyList ? (<div className={style.container}>
            <div className={style.headerContainer}>
                {
                    TabHeaderListTag.props.children.map((Header, i) => (Header.type === TabHeader ? (<button key={i} className={ [
                            'ft-sz-14',style[type],justified, style.header, disabledTabs.indexOf(i) !==-1?'disabled':'', currentTab === i ? style.active: ''
                        ].join(' ') } onClick={evnt => { this.headerClick(evnt, Header.props.onActivation, i) }} > {Header} </button>) : null)
                    )
                }
            </div>
            <div className={style.bodyContainer}>
                {
                    TabBodyListTag.props.children.map((Body, i) => (
                            Body.type === TabBody ? (<div key={i} className={`bg-white width100 ${(currentTab === i) ? '': 'display-none'}`}> {Body} </div>) : null
                        )
                    )
                }
            </div>
        </div>):null);
    }

};

tab/body/index.jsx

import React from 'react';

export default (props) => {
    return <div>{props.children}</div>;
};

tab/body/list/index.jsx

import React from 'react';

export default (props) => {
    return props.children;
};

tab/header/index.jsx

import React from 'react';

export default (props) => {
    return props.children;
};

tab/header/list/index.jsx

import React from 'react';

export default (props) => {
    return <div>{props.children}</div>;
};

But when I'm using it as follows:

class Sam extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value: 'Initial'
        };

        this.onChange = this.onChange.bind(this);
        this.onActivation = this.onActivation.bind(this);
    }

    onChange(e){
        console.log('onChange', e.target.value);
        this.setState({value: e.target.value});
    }

    onActivation(cur, old){
        console.log('onActivation', cur, old);
    }

    render() {
        return (<div>
            <input style={{marginLeft: '4rem'}} onChange={this.onChange}/>
            <Tab align="justified" type="gray" active={1} disabledTabs={[2]}>
                <TabHeaderList>
                    <TabHeader onActivation={this.onActivation}><Icon name="contact" width="25" height="25" color="gray" /></TabHeader>
                    <TabHeader><Icon name="dial" width="25" height="25" color="gray" /></TabHeader>
                    <TabHeader> <div>Disabled</div> </TabHeader>
                </TabHeaderList>
                <TabBodyList>
                    <TabBody className="pad-left-1r">
                        <h4>Testing Button {this.state.value}</h4>
                        <p>
                            Sample tab body
                        </p>
                    </TabBody>
                    <TabBody className="pad-left-1r">
                        <h4>Testing Button 2</h4>
                        <p>
                            This is just to demonstarate the use of tabs.
                            You could also make a `ul` inside like this:
                        </p>
                    </TabBody>
                    <TabBody className="pad-left-1r">
                        <h2>Im disabledTab</h2>
                    </TabBody>
                </TabBodyList>
            </Tab>
        </div>
        );
    }
}

it throws following error:

Component(...): A valid React element (or null) must be returned. You Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I'm unable to find where I'm returning undefined actually so it is throwing error.

But when I'm removing disabledTabs={[2]} in component Sam it works fine ie as follows:

<div>
            <input style={{marginLeft: '4rem'}} onChange={this.onChange}/>
            <Tab align="justified" type="gray" active={1} >
                <TabHeaderList>
                    <TabHeader onActivation={this.onActivation}><Icon name="contact" width="25" height="25" color="gray" /></TabHeader>
                    <TabHeader><Icon name="dial" width="25" height="25" color="gray" /></TabHeader>
                </TabHeaderList>
                <TabBodyList>
                    <TabBody className="pad-left-1r">
                        <h4>Testing Button {this.state.value}</h4>
                        <p>
                            Sample tab body
                        </p>
                    </TabBody>
                    <TabBody className="pad-left-1r">
                        <h4>Testing Button 2</h4>
                        <p>
                            This is just to demonstarate the use of tabs.
                            You could also make a `ul` inside like this:
                        </p>
                    </TabBody>
                </TabBodyList>
            </Tab>
        </div>

Answer 1

Changed some component as follows it worked:

tab/body/list/index.jsx

import React from 'react';

export default (props) => {
    return <div>props.children</div>;
};

tab/header/index.jsx

import React from 'react';

export default (props) => {
    return <div>props.children</div>;
};

These component was returning undefined incase of single child