Skip to content

react + vite + amis 时间日期组件存在英文 #11946

@leung0727

Description

@leung0727

描述问题:

在 react 框架中使用amis,其中的日期时间等组件会出现部分英文,不知道如何转成中文,如下图

截图或视频:

Image

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的?
    npm

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    6.4.1

  3. 粘贴有问题的完整 amis schema 代码:

import * as React from 'react'
import axios from 'axios'
import copy from 'copy-to-clipboard'

import { render as renderAmis } from 'amis'
import { ToastComponent, AlertComponent, alert, confirm, toast } from 'amis-ui'

class MyComponent extends React.Component<any, any> {
  render() {
    let amisScoped
    let theme = 'cxd'
    let locale = 'zh-CN'

    // 请勿使用 React.StrictMode,目前还不支持
    return (
      <div>
        <p>通过 amis 渲染页面</p>
        <ToastComponent
          theme={theme}
          key="toast"
          position={'top-right'}
          locale={locale}
        />
        <AlertComponent
          theme={theme}
          key="alert"
          locale={locale}
        />
        {renderAmis(
          {
            // 这里是 amis 的 Json 配置。
            type: 'page',
            title: '简单页面',
            body: '内容',
          },
          {
            // props...
            // locale: 'zh-CN' 
            // scopeRef: (ref: any) => (amisScoped = ref)
          },
          {
            // 下面三个接口必须实现
            fetcher: ({
              url, // 接口地址
              method, // 请求方法 get、post、put、delete
              data, // 请求数据
              responseType,
              config, // 其他配置
              headers, // 请求头
            }: any) => {
              config = config || {}
              config.withCredentials = true
              responseType && (config.responseType = responseType)

              if (config.cancelExecutor) {
                config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor)
              }

              config.headers = headers || {}

              if (method !== 'post' && method !== 'put' && method !== 'patch') {
                if (data) {
                  config.params = data
                }

                return (axios as any)[method](url, config)
              } else if (data && data instanceof FormData) {
                config.headers = config.headers || {}
                config.headers['Content-Type'] = 'multipart/form-data'
              } else if (data && typeof data !== 'string' && !(data instanceof Blob) && !(data instanceof ArrayBuffer)) {
                data = JSON.stringify(data)
                config.headers = config.headers || {}
                config.headers['Content-Type'] = 'application/json'
              }

              return (axios as any)[method](url, data, config)
            },
            isCancel: (value: any) => (axios as any).isCancel(value),
            copy: (content) => {
              copy(content)
              toast.success('内容已复制到粘贴板')
            },
          }
        )}
      </div>
    )
  }
}

  1. 操作步骤
    请简单描述一下复现的操作步骤...

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions