在React中的组件内部渲染不同的组件

Question

我有20个不同的组件和20个按钮。Component1，Component2，Component3 ...... Component20button1，button2，button3 .......... button20我想要的是单击按钮1时在div内渲染Component1，单击按钮2时将其替换为Component2。 ???

import React, { Component } from 'react';
class Dashboard extends Component {
    state = {  }
    render() { 
        return (
            <div>

            </div>
        );
    }
}

export default Dashboard;

Answer 1

不知道这里发生了什么。。但是我想您可能具有这样的功能所设置的状态：

setComponent(num){this.setState({componentNumber:num})}

然后您使用swtich语句检查render方法中的componentNumber状态并显示相关组件：

let componentToDisplay;
//switch statement that sets the componentToDisplay based on the this.state.componentNumber

return ( {componentToDisplay})

我猜是这样的...