React 页面模板

页面结构

excample-page
      |-api
          |- index.ts
      |-components
          |-delete-confirm
                |-index.modile.scss
                |-index.tsx
          |-main.module.scss
          |-Main.tsx
      |-interfaces
          |-Data.ts
      |-stores
          |-index.ts
          |-MainStore.ts
      |-styles
      |-index.tsx

api

index.ts

import axios from 'axios';
/** post接口 */
export const A = (
  param: ITransferRule
): Promise<IResult<null>> => {
  return axios
    .post('/xx', param)
    .then(res => res.data);
};

/** delete接口 */
export const B = (id: number): Promise<IResult<null>> => {
  return axios
    .delete(`/xx/${id}`)
    .then(res => res.data);
};

/** put接口 */
export const C = (
  param: ITransferRule
): Promise<IResult<null>> => {
  return axios
    .put('/xx', param)
    .then(res => res.data);
};

/** get接口 */
export const D = (): Promise<IResult<null>> => {
  return axios
    .get('/xx?typeId=PRODUCT_TYPE')
    .then(res => res.data);
};

components

Main.tsx

import React from 'react';
import { observer, inject } from 'mobx-react';
import { RouteConfigComponentProps } from 'react-router-config';
import { Spinner } from '@casstime/bricks';

import styles from './main.module.scss';
import MainStore from '../stores/MainStore';

import DeleteConfirm from './DeleteConfirm';

interface ITitleProps extends RouteConfigComponentProps<void> {
  mainStore?: MainStore;
}

/** 组件备注 */
@inject('mainStore')
@observer
export default class Main extends React.Component<ITitleProps> {
  componentDidMount() {
    const { mainStore } = this.props;
    const { init } = mainStore as MainStore;
    /* 获取初始化数据 */
    init ();
  }

  render() {
    const { mainStore } = this.props;
    const { isSaving } = mainStore as MainStore;
    return (
      <div className={styles.page}>
        <DeleteConfirm />
        {isSaving && <Spinner className={styles.spinner} />}
      </div>
    );
  }
}

main.module.scss

:global{
}
.page{
  padding: 24px 16px;
}
.spinner{
  z-index: 1100;
  position: fixed;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}

delete-confirm

index.tsx

import React from 'react';
import { observer, inject } from 'mobx-react';
import { Confirm, Icon, Backdrop } from '@casstime/bricks';

import styles from './index.module.scss';

import MainStore from '../stores/MainStore';

interface IDeleteConfirmProps {
  mainStore?: MainStore;
}

@inject('mainStore')
@observer
class DeleteConfirm extends React.Component<IDeleteConfirmProps> {
  render() {
    const { mainStore } = this.props;
    const { confirmVisible, toggleConfirm } = mainStore as MainStore;
    return (
      confirmVisible && (
        <Backdrop visible={true}>
          <Confirm
            className={styles.confirm}
            showShade={false}
            topTitle="删除"
            onClose={() => toggleConfirm(false)}
            onOk={this.confirmDelete}
            onCancel={() => toggleConfirm(false)}
            tipIcon={
              <Icon type="question-circle" color="#ffc602" size={44}></Icon>
            }
          >
            <Confirm.Header> 确认删除? </Confirm.Header>
            <Confirm.Content> 确认删除吗？ </Confirm.Content>
          </Confirm>
        </Backdrop>
      )
    );
  }
  /** 点击确认 */
  confirmDelete = () => {
    const { mainStore } = this.props;
    const {  isSaving } = mainStore as MainStore;
    if (!isSaving) {
      // 调删除接口
    }
  };
}

export default DeleteConfirm;

index.module.scss

:global{
  .br-confirm__content{
        word-break: break-all;
  }
}
.confirm{
  width: 420px;
}

interfaces

IData.ts

export interface IData{
  id: string;
  typeId?: string;
  dataKey: string;
  dataName: string;
  mismatchTips: string;
}

stores

index.ts

import MainStore from './MainStore';

export default {
  mainStore: new MainStore(),
};

MainStore.ts

// import { Toast } from '@casstime/bricks';
import { observable, action } from 'mobx';


class MainStore {
  /** 是否正在调保存，删除接口 */
  @observable isSaving = false;

  /** 删除弹框是否显示 */
  @observable confirmVisible = false;

 /** 切换删除弹框显示状态 */
  @action
  toggleConfirm = (value: boolean) => {
    this.confirmVisible = value;
  };
}

export default MainStore;

index.tsx

import React from 'react';
import { Provider } from 'mobx-react';
import { RouteConfigComponentProps } from 'react-router-config';
import Main from './components/Main';
import stores from './stores';
import { catchError } from '../../../hoc';

const Page = (props: RouteConfigComponentProps<void>) => {
  return (
    <Provider {...stores}>
      <Main {...props} />
    </Provider>
  );
};

export default catchError(Page);