react-jsx语法上使用switch匹配不同渲染组件

2022-08-18 07:25:37

这里主要讲的是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;

react-jsx语法上使用switch匹配不同渲染组件

码农公寓

相关文章