详细剖析｜袋鼠云数栈前端框架 Antd 3.x 升级 4.x 的踩坑之路

# 通过 npx 直接运行npx -p @ant-design/codemod-v4 antd4-codemod apps/xxxx
# 或者全局安装# 使用 npmnpm i -g @ant-design/codemod-v4# 或者使用 yarnyarn global add @ant-design/codemod-v4
# 运行antd4-codemod src

完成的工作：    1. 将 Form 与 Mention 组件通过 @ant-design/compatible 包引入     2. 用新的 @ant-design/icons 替换字符串类型的 icon 属性值     3. 将 Icon 组件 + type =“” 通过 @ant-design/icons 引入     4. 将 v3 LocaleProvider 组件转换成 v4 ConfigProvider 组件     5. 将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入

import { Icon } from 'antd';mport { SmileOutlined } from '@ant-design/icons';
const Demo = () => (  <div>     <Icon type="smile" />     <SmileOutlined />     <Button icon={<SmileOutlined />} />  </div>);

import { Icon } from '@ant-design/compatible';const Demo = () => (  <div>    <Icon type="smile" />    <Button icon="smile" />  </div>);

// antd v4const Demo = () => {  const [form] = Form.useForm();
  React.useEffect(() => {    form.setFieldsValue({      username: 'Bamboo',    });  }, []);
  return (    <Form form={form} {...props}> ... </Form>  )};

class Demo extends React.Component {  formRef = React.createRef();
  componentDidMount() {    this.formRef.current.setFieldsValue({      username: 'Bamboo',    });  }
  render() {    return (      <Form ref={this.formRef}>        <Form.Item name="username" rules={[{ required: true }]}>          <Input />        </Form.Item>      </Form>    );  }}

export const FilterForm: any = Form.create<Props>({  onValuesChange: (props, changedValues, allValues) => {    const { onChange } = props;    onChange(allValues);  },})(Filter);

<Form  ref={this.formRef}  layout="vertical"  className="meta_form"  onValuesChange={(_, allValues) => {    const { onChange } = this.props;    onChange(allValues);  }}>

const Demo = () => (  <Form initialValues={{ username: 'yuwan' }}>    <Form.Item name="username" rules={[{ required: true }]}>      <Input />    </Form.Item>  </Form>);

const Demo = ({ form: { getFieldDecorator } }) => (  const [username, setUsername] = useState('');  const handleValueChange = () => {    setUsername('yuwan');  }  return (    <Fragment>      <Form>        <Form.Item>          {getFieldDecorator('username', {             initialValue: username,             rules: [{ required: true }],          })(<Input />)}        </Form.Item>      </Form>      <Button onClick={handleValueChange}>Change</Button>    </Fragment>  ));
const WrappedDemo = Form.create()(Demo);

<Form.Item shouldUpdate={(prev, next) => prev.name !== next.name}>  {form => form.getFieldValue('name') === 'antd' && (    <Form.Item name="version">      <Input />    </Form.Item>  )}</Form.Item>

<FormItem label="具体时间" {...formItemLayout}>  {getFieldDecorator('specificTime', {    rules: [      {        required: true,        validator: (_, value, callback) => {          if (!value || !value.hour || !value.min) {             return callback('具体时间不可为空');          }          callback();        },      },    ],  })(<SpecificTime />)}</FormItem>

<FormItem  label="具体时间"  {...formItemLayout}  name="specificTime"  rules={[    {      required: true,      validator: (_, value) => {        if (!value || !value.hour || !value.min) {            return Promise.reject('具体时间不可为空');        }        return Promise.resolve();      },    },  ]}>  <SpecificTime />)</FormItem>

this.formRef.validateFields()  .then((values) => {    onOk({ ...values, id: appInfo.id || '' });})  .catch(({ errorFields }) {    this.formRef.scrollToField(errorFields[0].name);  })

try {  const values = await validateFields();} catch ({ errorFields }) {  scrollToField(errorFields[0].name);}

onFinishFailed = ({ errorFields }) => {  form.scrollToField(errorFields[0].name);};

getFieldDecorator('sideTableParam.primaryKey')getFieldDecorator('sideTableParam.primaryValue')getFieldDecorator('sideTableParam.primaryName')

const values = {  sideTableParam: {    primaryKey: xxx,    primaryValue: xxx,    primaryName: xxx,  }}

const values = {  'sideTableParam.primaryKey': xxx,  'sideTableParam.primaryValue': xxx,  'sideTableParam.primaryName': xxx,}

name={['sideTableParam', 'primaryKey']}name={['sideTableParam', 'primaryValue']}name={['sideTableParam', 'primaryName']}

setFieldsValue({  sideTableParam: [    {      primaryKey: 'xxx',      primaryValue: 'xxx',      primaryName: 'xxx',    },  ],});

m dependencies={[['alert', 'sendTypeList']]} noStyle>  {({ getFieldValue }) => {    const isShowWebHook = getFieldValue(['alert', 'sendTypeList'])?.includes(      ALARM_TYPE.DING    );   return (     isShowWebHook &&       RenderFormItem({         item: {           label: 'WebHook',           key: ['alert', 'dingWebhook'],           component: <Input placeholder="请输入WebHook地址" />,           rules: [             {               required: true,               message: 'WebHook地址为必填项',             },           ],           initialValue: taskInfo?.alert?.dingWebhook || '',         },       })     );  }}</FormItem>

const formItems = keys.map((k: React.Key) => (  <Form.Item key={k} required label="名称">    <Form.Item      noStyle      name={['names', k]}      rules={[        { required: true, message: '请输入标签名称' },        { validator: utils.validateInputText(2, 20) },      ]}    >      <Input placeholder="请输入标签名称" style={{ width: '90%', marginRight: 8 }} />    </Form.Item>     <i className="iconfont iconicon_deletecata" onClick={() => this.removeNewTag(k)} />  </Form.Item>));

<FormItem  label="过滤条件"  extra={    <Tooltip title={customSystemParams}>      系统参数配置&nbsp;       <QuestionCircleOutlined />     </Tooltip>   }>  <Input.TextArea /></FormItem>

const rowSelection = {  fixed: true,  columnWidth: 45,  selectedRowKeys,  onChange: this.onSelectChange,};

{  title: '账号',  dataIndex: 'user.userName',  key: 'userName',  width: 200,}

{  title: '账号',  dataIndex: ['user', 'userName'],  key: 'userName',  width: 200,}

<Table  rowKey="userId"  pagination={{  total: users.totalCount,    defaultPageSize: 10,  }}  onChange={this.handleTableChange}  style={{ height: tableScrollHeight }}  loading={this.state.loading}  columns={this.initColumns()}  dataSource={users.data}  scroll={{ x: 1100, y: tableScrollHeight }}/>
handleTableChange = (pagination: any) => {  this.setState(    {      current: pagination.current,    },    this.search  );};
search = (projectId?: any) => {  const { name, current } = this.state;  const { project } = this.props;  const params: any = {    projectId: projectId || project.id,    pageSize: 10,    currentPage: current || 1,    name: name || undefined,    removeAdmin: true,  };  this.loadUsers(params);};

<Table  rowKey="userId"  pagination={{    showTotal: (total) => `共${total}条`,    total: users.totalCount,    current,    pageSize,  }}  onChange={this.handleTableChange}  style={{ height: tableScrollHeight }}  loading={this.state.loading}  columns={this.initColumns()}  dataSource={users.data}  scroll={{ x: 1100, y: tableScrollHeight }}/>
handleTableChange = (pagination: any) => {  this.setState(    {      current: pagination.current,      pageSize: pagination.pageSize,    },    this.search  );};
search = (projectId?: any) => {  const { name, current, pageSize } = this.state;  const { project } = this.props;  const params: any = {    projectId: projectId || project.id,    pageSize,    currentPage: current || 1,    name: name || undefined,    removeAdmin: true,  };  this.loadUsers(params);};

columns={  [    {      title: '创建时间',      dataIndex: 'gmtCreate1',      key: 'aa',      sorter: true,      render(n: any, record: any) {        return DateTime.formatDateTime(record.gmtCreate);      }    },    ...  ]}onChange={(pagination: any, filters: any, sorter: any) {  console.log(pagination, '--pagination');  console.log(filters, '--filters');  console.log(sorter, '--sorter');}}

// 3.xactiveKey={undefined}// 4.xactiveKey={null}