pyb永波的技术博客

Antd 时间日期选择显示英文问题

时间日期选择框展示的内容显示英文,如何修改为中文?

    import { Popover,Divider,ConfigProvider } from 'antd'
    import zhCN from 'antd/lib/locale/zh_CN';
    import moment from "moment";
    import "moment/locale/zh-cn";
    moment.locale("zh-cn");
    
    
    // 在最外层的组件处包裹一下即可.
    
    <ConfigProvider locale={zhCN}>
    
    
    </ConfigProvider>

React+Antd+Umi 使用connect后,ref.current为undefined

在用React开发项目的过程中,遇到一个问题,使用connect链接组件包装成高阶组件HOC后,父组件通过ref调用子组件方法时,提示XXXRef.current为undefined报错.

外层父组件代码:

import React, { useEffect, useState, useRef } from 'react';

import CreateLabelForm from './components/createLabel';

const SmartLabelList = (props) => {

    const formRef = useRef();
    
    let createLabelConfigform = {
        loading: record.id ? true : false,
        form: addLabelForm,
        corpId: scorpList,
        formValues: record, //编辑时表单初始值,
    }
    
    <CreateLabelForm
          {...createLabelConfigform}
          ref={formRef}
          getCorpId={(value) => getCorpId(value)}
    />

}

子组件部分代码:

import React, {
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle
} from 'react';
import {
  connect
} from 'umi';


const CreateLabelTaskForm = forwardRef((props, refInstance) => {

const {
    form,
    tagGroupList,
    labelLoading,
    // refInstance
  } = props;

 useImperativeHandle(refInstance, () => ({
    // resetCusLabels 就是暴露给父组件的方法
    resetCusLabels: () => {
      setSelectedTags([])
    }
  }));


})

// 方法1:(定义组件时候,需要用`forwardRef`进行包裹)

export default connect(({ loading, global, PUSHMANAGEMODEL, SOPSALES }) => ({
  // corpList: global.corpList,
  // dataSourceList: PUSHMANAGEMODEL.dataSourceList,
  // shortRelationList: PUSHMANAGEMODEL.shortRelationList,
  // shortProList: PUSHMANAGEMODEL.shortProList,
  // workTarget: PUSHMANAGEMODEL.workTarget,
  // tagGroupList: SOPSALES.tagGroupList,
  // labelLoading: loading.effects[`SOPSALES/getAllTagGroup`]
}), null, null, { forwardRef: true })(CreateLabelTaskForm);


// 方法2: (定义组件时候,不需要用`forwardRef`进行包裹)

const CreateLabelTaskFormConnect = connect(({ loading, global, PUSHMANAGEMODEL, SOPSALES }) => ({
  // corpList: global.corpList,
  // dataSourceList: PUSHMANAGEMODEL.dataSourceList,
  // shortRelationList: PUSHMANAGEMODEL.shortRelationList,
  // shortProList: PUSHMANAGEMODEL.shortProList,
  // workTarget: PUSHMANAGEMODEL.workTarget,
  // tagGroupList: SOPSALES.tagGroupList,
  // labelLoading: loading.effects[`SOPSALES/getAllTagGroup`]

}))(CreateLabelTaskForm);

const CreateLabelTaskFormConnectRef = forwardRef((props, ref) => <CreateLabelTaskFormConnect  {...props} refInstance={ref} />);

export default CreateLabelTaskFormConnectRef