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>();
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);
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
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
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
const formList: IFormList[] = [$0];
{
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;
form.validateFields().then((values) => {
console.log(values);
});
<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>