react-jsx語法上使用switch匹配不同渲染組件

這里主要講的是jsx語法使用switch 的js語句

一般jsx語法執行的是簡單的運算和三元表達式

如果想要執行條件判斷如if語句和switch語句以及函數等 直接使用是會報錯的

這里應該使用函數立即執行的語法寫法，如果需要根據不同判斷渲染不同組件也可以不要忘了return結果

例如：{(這里寫函數)()}

{(()=>{這里可以寫if，switch等})()}

項目代碼實例

<Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: '80vh' }}>
          {tabArr.map((v,i) => (
            <TabPane tab={`${v}`} key={i}>
              {(()=>{
                //   switch (key) {
                //       case value:
                //           break;
                //       default:
                //           break;
                //   }
                switch (i) {
                    case 0:
                      return <FormDay/>
                    case 1:
                      return <FormWeek/>
                    case 2:
                      return <FormMonth/>
                    case 3:
                     return <FormSpecial/>
                    case 4:
                      return  <FormSelf/>
                    default:
                      return null
                  }
              })()}
            </TabPane>
          ))}
        </Tabs>

注意switch內要用return 帶有返回值：可以return一個組件，這樣就可以實現了不同判斷條件下返回不同組件界面元素

根據不同條件渲染不同組件 - switch.jsx

import './creat.less';
import React from 'react';
import { Tabs, Radio } from 'antd';

import FormDay from '../../component/form/formDay'
import FormWeek from '../../component/form/formWeek'
import FormMonth from '../../component/form/formMonth'
import FormSelf from '../../component/form/formSelf'
import FormSpecial from '../../component/form/formSpecial'
const { TabPane } = Tabs;
class Creat extends React.Component{
    constructor(props){
        super(props)
        this.state={ mode: 'top',}
    }

    componentDidMount(){
        //dom操作放在這里面  請求數據也建議放在這里
        console.log('04組件掛載完成')
        console.log(this.props)
    }
    handleModeChange = e => {
        const mode = e.target.value;
        this.setState({ mode });
      };
    render(){
        const { mode } = this.state;
        const tabArr = ['每天重復','每周重復','每月重復','特別日','自定義']
        return(
            <div>
             <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8,marginTop:8 }}>
                 <Radio.Button value="top">風格1</Radio.Button>
                <Radio.Button value="left">風格2</Radio.Button>
            </Radio.Group>
        <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: '80vh' }}>
          {tabArr.map((v,i) => (
            <TabPane tab={`${v}`} key={i}>
              {(()=>{
                switch (i) {
                    case 0:
                      return <FormDay/>
                    case 1:
                      return <FormWeek/>
                    case 2:
                      return <FormMonth/>
                    case 3:
                     return <FormSpecial/>
                    case 4:
                      return  <FormSelf/>
                    default:
                      return null
                  }
              })()}
            </TabPane>
          ))}
        </Tabs>
      </div>
        )
    }
}
export default Creat;