umi-plugin-locale 实现 react-intl 在 3.x 已经支持了通过

补充下用户侧是怎么用的，在 locales 目录下怎么写组件层怎么引，比如 <code class="

动态增加新语言 <div class="snippet-clipboard-content notranslate position-relative overfl

可以来一个获取当前所有可选语言的 API：<a class="issue-link js-issue-link" data-error-text="Failed

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

使用方式 <div class="highlight highlight-source-tsx notranslate position-relative over

[RFC] @umijs/locale about umi-next HOT 5 CLOSED

umijs commented on August 20, 2024 2

[RFC] @umijs/locale

from umi-next.

Comments (5)

sorrycc commented on August 20, 2024 1

补充下用户侧是怎么用的，

在 locales 目录下怎么写
组件层怎么引，比如 import { useLocale } from 'umi' 这样？
路由里怎么配
其他的场景

from umi-next.

chenshuai2144 commented on August 20, 2024 1

动态增加新语言

 useEffect(() => {
    addLocale('zh-TW', {
      name: '妳好，{name}',
    });
    setList(getAllLocales());
  }, []);

from umi-next.

ycjcl868 commented on August 20, 2024

可以来一个获取当前所有可选语言的 API：umijs/umi#3789
SSR 下的国际化，一般根据 url 来判断， getLocale 要支持根据 url 返回当前国际化。（类似 /zh-CN/index 和 /en-US/index）

from umi-next.

ycjcl868 commented on August 20, 2024

@chenshuai2144 formatMessage 会有问题，切换不了

from umi-next.

chenshuai2144 commented on August 20, 2024

使用方式

import React, { useState } from "react";
import { Button } from "antd";
import { useIntl, getLocale, getAllLocales, setLocale } from "umi";
import styles from "./index.css";

export default function() {
  const intl = useIntl();
  const [list] = useState<string[]>(getAllLocales());
  const locale = getLocale();

  return (
    <div className={styles.normal}>
      <h1>当前语言：{locale}</h1>
      {list.map(locale => (
        <a
          onClick={() => {
            setLocale(locale);
          }}
          style={{
            margin: 8
          }}>
          {locale}
        </a>
      ))}
      <Button type="primary">
        {intl.formatMessage(
          {
            id: "name"
          },
          {
            name: "旅行者"
          }
        )}
      </Button>
    </div>
  );
}