使用 switch case 渲染特定组件 --- React答案

【问题标题】：Rendering specific component using switch case --- React使用 switch case 渲染特定组件 --- React
【发布时间】：2019-04-26 14:09:39
【问题描述】：

我的要求是根据用户选择来渲染组件。我有一个左导航，我试图渲染与之关联的组件，但我收到错误：

错误：

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

我的代码如下：

-----ManageData.js-----

import React, {
    Component
} from 'react';
import NestedList from '../Left-nav/leftnav';
import '../Left-nav/leftnav.css';
import AddCarousel from '../addCarousel/addCarousel';
import AddClass from '../addClass/addClass';
import './manageData.css';

class ManageData extends Component {
    loadComponent = null;
    constructor(props) {
        super(props);
        this.state = {
            showChild: 1
        };
        //this.generateComponent = this.generateComponent.bind(this);
    }

    loadComponents = (data) => {
        console.log(data, this.state);
        if (data == 'AddClass') {
            this.setState({
                showChild: 2
            }, () => {

                console.log('state changed-----', this.state)
                //this.generateComponent(data, this.state);
            })
        }

    }




    render() {
        const showItem = this.state.showChild;


        return (

            <section className = "Admin-add-video">
            <div className="row">

            <div className = "col-3 set-padding" > < NestedList loadComponents = {this.loadComponents}/>
            </div >
            <div className = "col-9 set-ht" >
             { this.state.showChild == 1 && <AddCarousel/> }
              {this.state.showChild == 2 && <AddClass/>}

            </div>


            </div>
            </section>

        );
    }
}


export default ManageData;

嵌套列表是单击其项目时的单独组件，我正在获取值并尝试 setState()。

我已经尝试了这个网址的所有内容：using switch statement for react rendering 但是对于所有情况，我都会遇到相同的错误。

可能是我遗漏了什么。任何帮助将不胜感激。

【问题讨论】：

AddCarousel 和 AddClass 是 React 组件吗？
@DineshPandiyan 是的
看来问题出在AddClass 组件上。请仔细检查它是否正确导出。
分享组件代码。
@Dinesh 你是对的我没有正确导出组件。感谢您的帮助

标签： reactjs

【解决方案1】：

看起来问题出在AddClass 组件上。请仔细检查它是否正确导出。

注意：在我对该问题的评论中发布此答案，因为它修复了 OP 的错误。

【讨论】：

【解决方案2】：

在渲染方法中试试这个：

render() {
        const { showChild } = this.state;

        const renderChilds = () => {
            switch(showChild) {
                case 1:
                    return <AddCarousel />;
                case 2:
                    return <AddClass />;
                default:
                    return <div />;
            }
        };

        return (
            <section className="Admin-add-video">
                <div className="row">
                    <div className = "col-3 set-padding">
                        < NestedList loadComponents={this.loadComponents} />
                    </div >
                    <div className = "col-9 set-ht" >
                        {renderChilds()}
                    </div>
                </div>
            </section>
        );
    }

【讨论】：