🐛[BUG] 国际化设置

singingBoy commented 3 years ago

🐛 bug 描述

官网例子：

项目使用：

📷 相关代码


var IntlContext = _react.default.createContext(intlMap[(0, _util.getLang)() || ''] || zhCNIntl);

<IntlProvider value={zhCNIntl}>
      <ProTable {...props} />
</IntlProvider>

🏞 期望结果

期望表现与antd-pro官方例子

© 版本信息

Ant Design Pro-table 版本: 2.4.4
umi 版本 3.2.4
浏览器环境 Google Chrome 78.0.3904.108
开发环境 [win10]

chenshuai2144 commented 3 years ago

dumi 没有默认用 antd 的 config 包了一下。在 umi 中使用会自动包，不用担心的

johnnylc commented 3 years ago

dumi 没有默认用 antd 的 config 包了一下。在 umi 中使用会自动包，不用担心的

在使用cra搭建框架时，没有使用umi脚手架，ProTable的国际化存在问题，ProTable内组件不受antd ConfigProvider设置控制。

如下示例，外层使用antd ConfigProvider设置locale为zhCN，Empty与Table为antd组件，ProTable为@ant-design/pro-table组件。

        <ConfigProvider locale={zh_CN}>
          <Space direction='vertical' style={{width: '100%'}}>
            <Empty />
            <Table dataSource={[]} columns={columns} />
            <ProTable dataSource={[]} headerTitle='Pro-table' columns={columns} search={false}/>
          </Space>
        </ConfigProvider>

以上示例渲染结果如下图：

结果中，antd组件的国际化为中文，但是ProTable的国际化仍为英语。请问如何在不使用umi时解决ProTable的国际化问题？

areeudh-q commented 3 years ago

我也出现这个问题，用的也是cra脚手架搭的，需要解决方法！

shenjo commented 3 years ago

我看了下代码，目前我得到的结论大致是pro-table当前使用的antd（4.1.5）版本的问题

当我把pro-table的源代码拷贝到项目中时，国际化一切正常，但是切到包依赖就有问题（我的项目中使用的antd是最新的antd 4.5.3)

看代码的过程中，还发现如下问题

查询条件【查询】【重置】按钮始终是英文原因：在intlContext中，是这样定义的其中使用的getLang() 方法会在navigator.language上添加一个{{xxx}}导致intlMap找不到这样的key,所以默认中文

@chenshuai2144

chenshuai2144 commented 3 years ago

我在最近的脚本里面删除了这个方法，全部使用了 antd 类似的 key，应该可以解决这个问题

glzcc commented 3 years ago

我也遇到了同样的问题，独立引入的proTable，proTable为英文显示，其他ant控件都是中文

4tj commented 3 years ago

遇到同样问题还没解决，主要在2个点上不能接受： 1.如果在最外层包裹了Antd的 <ConfigProvider locale={zhCN}/> 时，ProTable会直接报错 Cannot read property 'locale' of undefined。 2.即便在ProTable外层再次包裹一次来自ProTable包的ConfigProvider，涉及form内的如DatePicker之类的都还是英文。官方实例上也是这样。

chenshuai2144 commented 3 years ago

@4tj 你是不是使用了不同的包类型。 protable 会用 es 的，你是不是使用了lib 的 ConfigProvider

4tj commented 3 years ago

@4tj 你是不是使用了不同的包类型。 protable 会用 es 的，你是不是使用了lib 的 ConfigProvider

我后来定位出了问题现象，antd 和 pro最新版情况下，使用了babel-plugin-import动态载入antd/lib，会导致国际化报错

liuweiGL commented 3 years ago

加油改下呀~

4tj commented 3 years ago

加油改下呀~

我自己后来定位出了问题，其实是babel-plugin-import。不过这里的确对于非umi方案不太友好

liuweiGL commented 3 years ago

请问有解决方法吗？

4tj commented 3 years ago

请问有解决方法吗？

可以尝试先去掉babel-plugin-import看看是否正常。

liuweiGL commented 3 years ago

那我还是选择先不国际化~

liuweiGL commented 3 years ago

手动指定一个 intl 配置就不报错了，但是国际化还存在一些未翻译的问题~

App.tsx ：

import React from 'react'

import { UseRequestProvider } from '@ahooksjs/use-request'
import { BaseOptions } from '@ahooksjs/use-request/lib/types'
import { IntlProvider, zhCNIntl } from '@ant-design/pro-table'
import { ConfigProvider as AntdConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
import { BrowserRouter } from 'react-router-dom'
import 'src/components/Formily/setup'

import { ConfigProvider } from 'src/context/config'
import { UserProvider } from 'src/context/user'
import fetcher from 'src/lib/fetcher'
import Router from 'src/router'
import 'src/style'

import API from './services'

window.apis = API

const useRequestConfig: BaseOptions<unknown, string[]> = {
  manual: true,
  requestMethod: fetcher.request
}

const App: React.FC = () => {
  return (
    <UserProvider>
      <ConfigProvider>
        <AntdConfigProvider locale={zhCN}>
          <IntlProvider value={{ intl: zhCNIntl }}>
            <UseRequestProvider value={useRequestConfig}>
              <BrowserRouter>
                <Router />
              </BrowserRouter>
            </UseRequestProvider>
          </IntlProvider>
        </AntdConfigProvider>
      </ConfigProvider>
    </UserProvider>
  )
}
export default App

caro-li commented 3 years ago

所以，这个问题到底怎么解决！前面这么多不同的看法，哪个有权威的解释一下

YanYuanFE commented 3 years ago

我也遇到这个问题，"@ant-design/pro-layout": "^6.9.0", "@ant-design/pro-table": "^2.17.0","antd": "^4.9.4", 解决办法是修改babel-plugin-import的babel配置，

["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }

libraryDirectory修改lib为es，ok

leohxj commented 2 years ago

如果使用了 babel-plugin-import 动态加载 antd 的话, 默认是从 lib 目录加载文件.

但 pro-components 被构建的时候,一般是读取 module 字段, 对应了 es 目录文件, 导致了组件获取 antd ConfigProvider 上下文为 null ,从而使用了默认的中文文案.

解决方法就是设置 libraryDirectory 为 es!!!

懂的点个赞.

hsbtr commented 1 year ago

如果使用了 babel-plugin-import 动态加载 antd 的话, 默认是从 lib 目录加载文件.

但 pro-components 被构建的时候,一般是读取 module 字段, 对应了 es 目录文件, 导致了组件获取 antd ConfigProvider 上下文为 null ,从而使用了默认的中文文案.

解决方法就是设置 libraryDirectory 为 es!!!

懂的点个赞.

这个方案在DateTime组件中不好使

ant-design / pro-components