Question

我的要求是根据用户选择渲染组件。我单击鼠标左键，试图显示与之关联的组件，但出现错误：

错误：

函数作为React子代无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

我的代码如下：

------ 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 但是在所有情况下，我都会遇到相同的错误。

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

Answer 1

在render方法中尝试一下：

updatePixelBuffer(1, 2,triggerRefresh);

Answer 2

AddClass组件似乎有问题。请仔细检查它是否正确导出。

注意：由于我修正了OP的错误，因此在我对问题的评论中发表了此答案。

使用开关盒渲染特定组件--- React

2 个答案: