{}用于单个语句。更简洁的方法是switch在 return 语句之前 ing：

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>
    );
}

React 需要{}块中的表达式，因此您需要将 switch 语句包装到 IIFE 中：

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

但我个人实际上更喜欢立即访问的数组文字（IAAL）：

 {[,<DiscoveryGroup/>, <FinancialGroup />][this.state.showGroup] || <SalesStuffGroup />}