demo页面

如果您使用我们的种子工程，那么可以尝试使用以下代码，如果您是在其他hzero工程，请按照它的规范来。

这里不再讲解关于react、es6、less等基础内容。

import * as React from 'react';
import { connect } from 'dva'; // connect了之后，就不需要withRouter了
import { Button, message } from 'hzero-ui'; // 这玩意无限接近ant design，但还请看hzero-ui文档
import { routerRedux } from 'dva/router'; // 路由
import notification from 'utils/notification'; // 封装自hzero-ui/notification
import { Header, Content } from 'components/Page'; // 如果是header+content的形式的化，用这两个组件
import { Bind } from 'lodash-decorators';

import styles from './homeworkComponent.less';  // css module

@connect(({ homeworkModel, loading }) => ({
  homeworkModel,
  loadingGet: !!loading.effects['modelName/effectName'], // 当这个effect的接口调用时，this.props.loadingGet就为true
  loadingGetData1: !!loading.effects['homeworkModel/getData1'], // 当这个effect的接口调用时，this.props.loadingGet就为true
}))
export default class homeworkComponent extends React.Component {
  // 建议都写构造函数
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 生命周期函数vscode自动补出来就行，不用箭头函数的形式
  componentDidMount() {
    // 接口可以放在这调用，进入页面调一次
  }

  @Bind
  getData() {
    this.props.dispatch({
      type: 'homeworkModel/getData1',
    }).then(res => {
      // eslint-disable-next-line
      console.log(res);

      notification.success({message: 'click'});
    });
  }

  // 非生命周期函数，只能这么写，用@Bind修饰器，不要写成箭头函数
  @Bind
  jumpToOtherPage() {
    this.props.dispatch(
      routerRedux.push({
        // 路由跳转
        pathname: `路由文件里的path字段`,
      })
    );
  }

  render() {
    const {
      homeworkModel,
    } = this.props;

    return (
      <>
        <Header title="header标题">
          <Button>
            click
          </Button>
          {/* Header内部是flex布局，flex-direction: row-reverse；（倒序）；下面这个div会在左侧，把Button往右边挤 */}
          <div style={{ flex: 1 }} />
        </Header>
        <Content>
          <div className={styles.homeworkComponent}>
            homeworkComponent
          </div>
        </Content>
        {/* <Modal>
          Modal、滑窗等
        </Modal> */}
      </>
    );
  }
}

另外，less文件，我们建议最外层包裹一个类名，类名尽可能复杂，反正也只写一次，可以拼接路径。

// 驼峰命名，同一个less文件中，类名不要重名
.routeMymoduleMyfolderIndex {
  .testClass {
    color: red;
  }
}