HJ 代码片段

基础代码

im

import xxx;

imp

import xx from xxx

imd

import { xx } from xxx

ime

import * as xx from xxx

ima

import { xx as xxx } from xxxx

exp

export default xxx;

exd

export { xx } from xxx

exa

export { xx as xxx } from xxxx

dob

const { xx } = xxx;

dar

const [xx] = xxx;

cfun

const xx = (xxx) => {};

clg

console.log("xx: ", xx);

cer

console.error("xx: ", xx);

useeffect

useEffect(() => {}, []);

usestate

const [xx, setXx] = useState(xxx);

useref

const xx = useRef();

usecallback

const xx = useCallback(() => {}, []);

usememo

const xx = useMemo(() => {}, []);

usenav

const navigation = useNavigation();

useroute

const { params } = useRoute();

rf

import React from 'react'

const Example = props => {
  return <div>hello world<div>
}

export default Example

rfi

import React, { FC } from 'react'

interface IProps {}

const Example: FC<IProps> = props => {
  return <div>hello world<div>
}

export default Example

rff

import React, { forwardRef, useImperativeHandle } from 'react'

export interface IExampleRef {}

interface IProps {}

const Example: React.ForwardRefRenderFunction<IExampleRef, IProps> = (
  props,
  ref,
) => {
  useImperativeHandle(ref, () => ({})

  return <div>hello world</div>
}

export default forwardRef(Example)

业务代码

columns

const columns: ColumnsType<any> = [
  { title: "title", dataIndex: "name" },
  {
    title: "操作",
    dataIndex: "action",
    render: (_, row) => {
      return (
        <ActionText.Group>
          <ActionText status="primary" text="编辑" to="/components" />
        </ActionText.Group>
      );
    },
  },
];

usetable

const { tableProps, form, submit, reset, refresh } = useTablePagingGQL({
  formatParams: (values) => {
    const { page, ...val } = values;
    return {
      input: {
        ...val,
        ...page,
      },
    };
  },
  gql: ExampleDocument,
  gqlKey: "example",
});

formsearch

<Form form={form}>
  <SearchFormLayout.Row>
    <SearchFormLayout.Col>
      <Form.Item label="label" name="label">
        <Input />
      </Form.Item>
    </SearchFormLayout.Col>
    <SearchFormLayout.Col>
      <Form.Item>
        <SearchFormLayout.Space>
          <Button type="primary">搜索</Button>
          <Button type="default">重置</Button>
        </SearchFormLayout.Space>
      </Form.Item>
    </SearchFormLayout.Col>
  </SearchFormLayout.Row>
</Form>

forminput

<Form.Item label="label" name="name">
  <Input />
</Form.Item>

formtext

<Form.Item label="label" name="name">
  <Input.TextArea />
</Form.Item>

formselect

<Form.Item label="label" name="name">
  <Select options={[]} />
</Form.Item>

formasync

<Form.Item label="label" name="label">
  <AsyncSelect
    remote={{
      gqlKey: "example",
      gql: ExampleDocument,
    }}
  />
</Form.Item>

fromcheck

<Form.Item label="label" name="name" valuePropName="checked">
  <Checkbox>content</Checkbox>
</Form.Item>

fromnumber

<Form.Item label="label" name="name">
  <InputNumber />
</Form.Item>

formswitch

<Form.Item label="label" name="name" valuePropName="checked">
  <Switch />
</Form.Item>

fromradio

<Form.Item label="label" name="name">
  <Radio.Group>
    <Radio value="a">item 1</Radio>
    <Radio value="b">item 2</Radio>
  </Radio.Group>
</Form.Item>

formdate

<Form.Item label="label" name="name">
  <DatePicker />
</Form.Item>

fromrange

<Form.Item label="label" name="name">
  <DatePicker.RangePicker />
</Form.Item>

formbutton

<Form.Item>
  <Button type="primary" htmlType="submit" onClick={() => ({})}>
    submit
  </Button>
  <Button htmlType="button" onClick={() => ({})}>
    reset
  </Button>
</Form.Item>