MS Snippet 代码片段

日常开发中常用的 react 代码片段

支持的语言类型

• Typescript (.ts)
• Typescript React (.tsx)

基础的代码片段

Prefix	Body
log→	console.log($1)$2
div	<div className={styles.$1}></div>
import→	import moduleName from 'module'
import_d→	import { destructuredModule } from 'module'
const→	const $1 = $2
let→	let $1 = $2
const_d→	const { $2 } = $1
let_d→	let { $2 } = $1
interface→	export interface I$1 {$2}

IParams

export interface IParams {
  ${1: id}: string$2
}

IQuery

interface IQuery {
  page: number,
  ${1: limit}: number$0
}

React hook

useState

const [$1 set$1] = useState<$2>($3)

useEffect

useEffect(() => {
  $0
} [$1])

useDispatch

const dispatch = useDispatch();

useParams

const { $2 } = useParams<$1>();

useForm

const [form] = Form.useForm();

useQueryAndFetch

const { query, updateQueryAndFetch } = useQueryAndFetch<IQuery>(initQuery, $1);

React Native Components

react

import React from "react";

interface IProps {}

const FileName: React.FC<IProps> = (props) => {
  return <div>$2</div>;
};

export default FileName;

re-connect

import React from 'react'
import { connect } from 'umi'
import { IConnectProps IConnectState } from '@/models/connect'

interface IProps extends IConnectProps {}

const FileName:React.FC<IProps> = props => {
  $0
  return <div>$2</div>
}
export default connect(({ loading $3 }: IConnectState) => ({
  ...$3
  loading: loading.effects[xxx]
}))(FileName)

connect

export default connect(({ $1 }: IConnectState) => ({
  ...$1,
}))($2);

modal_form

import React, { useEffect } from 'react'
import { connect, useDispatch } from 'umi'
import { IConnectProps, IConnectState } from '@/models/connect'
import { Form, Modal } from 'antd'
import { MSForm } from '@/components'
import { IFormList } from '@moresec/react-components/dist/form/MSForm'

export interface IProps extends IConnectProps {
  visible: boolean
  setVisible: React.Dispatch<React.SetStateAction<boolean>>
  handleUpdate(): void
}

const FileName: React.FC<IProps> = props => {
  const dispatch = useDispatch()
  const { visible, setVisible, handleUpdate } = props
  const [form] = Form.useForm()

  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log(values)
      dispatch({
        type: 'xx',
        payload: values,
        callback: () => {
          handleUpdate()
          handleClose()
        }
      })
    })
  }

  const handleClose = () => {
    setVisible(false)
  }

  useEffect(() => {
    console.log(visible)
    form.resetFields()
  }, [visible])

  const formList: IFormList[] = [
    {
      type: 'input',
      itemProps: {
        label: '输入框',
        name: 'value',
        rules: [{ required: true }]
      },
    },
  ],
,
  return (
    <Modal
      title={$2}
      visible={visible}
      onCancel={handleClose}
      onOk={handleSubmit}
    >
      <MSForm form={form} formList={formList} colon={false} />
    </Modal>
  )
}

export default connect(({ $3 }: IConnectState) => ({
  ...$3
}))(FileName)

结合项目一些常用的代码片段

arrow

($1) => {
  $2;
};

arrow_c

const $1 = ($2) => {
  $0;
};

searchParams

const searchParams = getSearchParams(window.location.search);
const { page = 1, limit = 10, ...resetParams } = searchParams;

initQuery

const initQuery = {
  page: Number(page),
  limit: Number(limit),
  ...resetParams,
};

dispatch

dispatch({
  type: $1,
  payload: { $2 },
});

callback(.tsx)

callback: ($1) => {
  $2;
};

if

if ($1) {
  $2;
}

cr

// TODO: CODE REVIEW ${1: Author}: $2

computedNextPage

const { total, current, pageSize } = ${1:tableData}.pagination,
const nextPage = computedNextPage(current, pageSize, total),
updateQueryAndFetch({ page: nextPage }),
message.success('${2:删除成功}')$0

结合 react-components 组件库

MSTitle

• MSTitle

  <MSTitle title="$1"></MSTitle>
  

• MSTitle_e

  <MSTitle title="$1">
    <Button type="primary" onClick={handleExport}>
      报表导出
    </Button>
  </MSTitle>
  

MSQuery

• MSQuery

  <MSQuery conditions={condition} />
  

• condition

  const condition: ICondition<QueryType>[] = [$1];
  

• condition_select

  {
    label: '$1',
    defaultValue: $2,
    options: $3,
    itemProps: {
      showSearch: false,
      width: 180
    },
    onChange: (value: $4) => updateQueryAndFetch({ $5 })
  }
  

MSSearch

• MSSearch

  <MSSearch
    placeholder='$1'
    value={query.$2}
    onSearch={(val: string) => updateQueryAndFetch({ $2: val })},
  />
  

MSTable

• MSTable

  <MSTable data={tableData} onChange={handleTableChange} columns={columns} />
  

• MSProTable

  <MSProTable data={tableData} onChange={handleTableChange} columns={columns} />
  

• handleTableChange

  const handleTableChange = ({ current, pageSize }: TablePaginationConfig) => {
    updateQueryAndFetch({
      page: current,
      limit: pageSize,
    });
  };
  

• columns

  const columns: ColumnProps<$1>[] = [$2];
  

• column_item

  {
    title: '$1',
    dataIndex: '$2'
  }
  

• column_item_r

  {
    title: '$1',
    dataIndex: '$2',
    render: (_$3, record) => {
      return $4
    }
  }
  

MSAboutLayout

• MSAboutLayout

  <MSAboutLayout label='$1' value={$2} />$0
  

MSForm

• MSForm

  <MSForm form={form} formList={formList} colon={false} />
  

• formList

const formList: IFormList[] = [$0];

• formItem

{
  type: '$1',
  itemProps: {
    label: '$2',
    name: '$3',
    rules: [{ required: true }]
  },
  controlledProps: {$4}
}

用于(.ts)文件中的单独的代码片段

model

import { Effect, Reducer } from "umi";
import api from "@/services";

export interface IFileNameState {}

export interface IFileNameModel {
  state: I$1State;
  effects: {
    $2;
  };
  reducers: {
    updateState: Reducer<I$1State>;
  };
}

const {} = api;

const $1: IFileNameModel = {
  state: {},
  effects: {},
  reducers: {
    updateState(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

export default FileName;

*

*$1({ payload, callback }, { call, put }) {
  const response = yield call($2, payload)
  $3,
}

*put

yield put({
  type: "updateState",
  payload: { $1 },
});

response_t

const { count = 0, result = [] } = response;

*put_table

yield put({
  type: "updateState",
  payload: {
    $1: {
      list: result,
      pagination: {
        total: count,
        current: payload.page,
        pageSize: payload.limit,
      },
    },
  },
});

callback

callback && callback();

tableData

tableData: {
  list: $1[]
  pagination: MS.pagination
}

tableData_i

tableData: {
  list: [],
  pagination: {
    total: 0,
    current: 1,
    pageSize: 10
  }
}

route_f

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

route_s

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

const_list

export const $1 = [{ label: $2, value: $3 }];

export const MAP_$1 = genMapObject($1);
export type T_MAP_$1 = keyof typeof MAP_$1;

modal

import { Modal } from "antd";
interface IProps {
  data: any;
  visible: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}
const Index: React.FC<IProps> = (props) => {
  const { visible, onConfirm, onCancel, data } = props;

  const handleConfirm = () => {
    onConfirm?.();
  };
  const handleCancel = () => {
    onCancel?.();
  };

  return (
    <Modal
      title="标题"
      width={540}
      visible={visible}
      destroyOnClose={true}
      onOk={handleConfirm}
      onCancel={handleCancel}
      confirmLoading={false}
    >
      content
    </Modal>
  );
};
export default Index;

formv

form.validateFields().then((values) => {
  console.log(values);
});

forms

<Form.Item
  shouldUpdate={(prevValues, curValues) => prevValues.a !== curValues.a}
>
  {({ getFieldValue }) => {
    return <Form.Item name="name" />;
  }}
</Form.Item>

useR

const {
  data: selfdata,
  loading,
  run,
} = useRequest(fetch, {
  manual: true,
  onSuccess: () => {
    // dosomething
  },
});

co

const columns: ColumnsType<type>[] = [
  {
    title: "",
    dataIndex: "",
  },
];

mss

message.success("$1");

msr

message.error("$1");

msf

const formList: IFormList[] = [
  {
    type: "select",
    itemProps: {
      label: "镜像",
      name: "images",
    },
  },
];

crf

const Index: React.FC = () => {
  return <div>index</div>;
};
export default Index;

usm

const { visible: , show: , hide:  } = useModalVisible()

ims

import styles from './index.less

fom

<Item label="label"></Item>