如何在JSX中使用switch case:ReactJS

Question

我在我的反应应用程序中导入了四个组件.我如何有条件地渲染其中一个组件(基于道具).这就是我想要做的

<ReactSVGPanZoom
      //switch(this.props.Selected){
      // case '1': render <ComponentOne/>; break;
      // case '2': render <ComponentTwo/>; break;
      // case '3': render <ComponentThree/>; break;
      // case '4': render <ComponentFour/>; break;
      // default: render <ComponentOne/>
        }
</ReactSVGPanZoom>

Answer 1

您可以从 switch 中获取组件（在函数中或在 中内联render）并将其呈现为 的子级ReactSvgPanZoom，如下所示：

getComponent(){
  switch(this.props.Selected){
    case '1': 
      return <ComponentOne/>;
    case '2': 
      return <ComponentTwo/>; 
    // .. etc
    default: 
      return <ComponentOne/>
  }
}
render() {
    return (<ReactSVGPanZoom>
        {this.getComponent()}
      </ReactSVGPanZoom>);
  }

Answer 2

直接它是不允许的,因为我们不能在JSX中放置任何语句.你可以做一件事,把代码(切换逻辑)放在一个函数中并调用该函数,然后从中返回正确的组件.

检查doc:在JSX中嵌入表达式

像这样:

<ReactSVGPanZoom
    {this.renderComponent()}
</ReactSVGPanZoom>


renderComponent(){
    switch(this.props.Selected){
        case '1': return <ComponentOne/>;
        case '2': return <ComponentTwo/>;
        case '3': return <ComponentThree/>;
        case '4': return <ComponentFour/>;
        default: return <ComponentOne/>
    }
}

建议:

break之后不需要return.

Answer 3

render() {
  return (
    <div>
      {
        (() => {
          switch(this.props.value) {
            case 1:
              return this.myComponentMethod();
              break;
            case 2: 
              return () => { return <AnotherComponent/> }; 
              break;
            case 3:
              return <div>1</div>; 
            break;
            default: return null; break;
          }
        }).call(this)
      }
    </div>
  )
}