使用switch语句进行反应渲染

Question

我目前正在这样做，以有条件地渲染某些组件：

render() {
    return (
        <React.Fragment>
            <div id="call_notes_app" className="row">
                <NavTree onNavChange={this.changeActiveGroup} />
                {this.state.shownGroup == 1 && <DiscoveryGroup/>}
                {this.state.shownGroup == 2 && <FinancialGroup/>}
                {this.state.shownGroup == 3 && <SalesStuffGroup/>}
            </div>
        </React.Fragment>
    );
}

当我尝试使用一条switch语句时，它不起作用（在控制台中出现ERROR ABORT）：

render() {
    return (
        <React.Fragment>
            <div id="call_notes_app" className="row">
                <NavTree onNavChange={this.changeActiveGroup} />

                {
                    switch(this.state.shownGroup) {
                        case 1:
                            <DiscoveryGroup/>
                            break;
                        case 2:
                            <FinancialGroup />
                            break;
                        default:
                            <SalesStuffGroup />
                    }
                }
            </div>
        </React.Fragment>
    );
}

有没有办法做到这一点switch？

Answer 1

{}用于单个语句。switch在return语句之前会采用一种更清洁的方式：

render() {
    let component = null;
    switch(this.state.shownGroup) {
      case 1:
        component = <DiscoveryGroup />;
        break;
      case 2:
        component = <FinancialGroup />;
        break;
      default:
        component = <SalesStuffGroup />;
    }

    return (
        <React.Fragment>
            <div id="call_notes_app" className="row">
                <NavTree onNavChange={this.changeActiveGroup} />
                {component}
            </div>
        </React.Fragment>
    );
}

如果您最终拥有许多动态组件，则将事情分解为单独的方法将使事情变得更加清洁：

renderGroup(group) {
    switch (group) {
      case 1:
        return <DiscoveryGroup />;
      case 2:
        return <FinancialGroup />;
      default:
        return <SalesStuffGroup />;
    }
}

render() {
    return (
        <React.Fragment>
            <div id="call_notes_app" className="row">
                <NavTree onNavChange={this.changeActiveGroup} />
                {this.renderGroup(this.state.shownGroup)}
            </div>
        </React.Fragment>
    );
}