ES6返回JSX的两种方式

工作中遇到根据条件判断返回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>
    );
  }