工作中遇到根据条件判断返回JSX的情况,做个小结
方式1:直接返回(注意圆括号内包含JSX表达式)
return
(
<MonthPicker
className={styles.element}
format='YYYY-MM'
placeholder='请选择月份'
onChange={this.getSelectedMonth}
/>
);
方式2:返回一个数组
/**
* 没有选择设备只渲染空的TabPane
* @return {*}
*/
formEmptyTabPane = () => {
const resultSet = [];
resultSet.push(
<TabPane tab="遥测值" key="ycTab" />,
<TabPane tab="遥信值" key="yxTab" />,
<TabPane tab="电度值" key="ymTab" />
);
return resultSet;
};
// 使用
render() {
return (
<Fragment title={false}>
<Tabs>{this.formEmptyTabPane()}</Tabs>
</Fragment>
);
}