使用 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

{}

用于单个语句。一个更简洁的方法是在 return 语句之前

switch

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

Answer 2

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 />}

Answer 3

开关很好，但在这些情况下，使用对象（或带查找的数组）可能更优雅：

const LayoutComponents {
    'simple': SimpleLayout,
    'wild': WildLayout,
    'freudian': FreudianLayout,
}


const Layout = LayoutComponents[props.layout];

if (!Layout) {
   console.error('Drama Alert');
   // throw error or return
}

// render. 
return <Layout {...props}>{props.children}</Layout>