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