Question

我创建了一个标签组件，如下所示：

标签/ index.jsx

import React from 'react';

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

标签/体/ index.jsx

import React from 'react';

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

标签/体/列表/ index.jsx

import React from 'react';

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

标签/标头/ index.jsx

import React from 'react';

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

标签/标头/列表/ index.jsx

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>
        );
    }
}

但是当我按照以下方式使用它时：

Component(...): A valid React element (or null) must be returned. You

它会抛出以下错误：

may have returned undefined, an array or some other invalid object.   disabledTabs={[2]}

我无法找到我实际返回未定义的位置，因此会抛出错误。

但是当我删除组件Sam中的<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>时，它可以正常工作，如下所示：

return

Answer 1

更改了一些组件，如下所示：

标签/体/列表/ index.jsx

import React from 'react'; export default (props) => { return <div>props.children</div>; };

标签/标头/ index.jsx

import React from 'react'; export default (props) => { return <div>props.children</div>; };

这些组件返回未定义的单个孩子

自定义反应标签组件不接受＆＃34; dissabledTabs＆＃34;支柱

1 个答案: