react多重判断条件渲染相应组件

需求来了，多种判断条件下，判断后渲染对应的组件，如果说if else堆叠，那代码会又乱又没有可读性，并且还要渲染对应的组件，最好的思路就是用switch case语句，但是又不想在render里写，那就要借助react的state，是的，react的state是可以传入组件的，这样一来就简单了很多

    this.state = {
        component:'',
    }
    chooseComponent = (e) => {
        //根据你想要的判断条件写入
        switch (e.type) {
            case '1':
                this.setState({
                    component:<type1/>
                })
            break;
            case '2':
                this.setState({
                    component:<type2/>
                })
            break;
            case '3':
                this.setState({
                    component:<type3/>
                })
            break;
            ......
      }
    render() {
        return(
            <>
                //此处只需要写被传入组件的state就可以了
                {this.state.component}
            </>
        )
    }

这样判断条件跟结构题分离，也不会被if-else一直套，简洁明了，可读性强，希望能帮助正纠结要怎么判断后再去渲染对应组件而无头绪的小伙伴，如有问题，可以留言一起改进，谢谢！