react-intl 传参数

react-intl传参数

使用 formatMessage

formatMessage 提供两个参数

function formatMessage(
descriptor: MessageDescriptor,
values?: Record<string, MessageFormatPrimitiveValue>
): string;

e.g:

formatMessage({id:'xxx'},{name:'ben'})

// 字典里
{
 	xxx:'test , {name}'
}

结果:

test , ben

`@alicloud/console-components-intl-core` 是阿里云控制台提供的一种用于国际化功能的核心库。以下是使用它的简要教程: 1. **安装依赖**: 首先,你需要在你的项目中安装该库。如果你使用npm或yarn,可以在命令行中运行: ```bash npm install @alicloud/console-components-intl-core --save # 或者 yarn add @alicloud/console-components-intl-core ``` 2. **导入组件**: 在需要使用国际化的地方,例如某个React组件内,引入`FormattedMessage`或其他相关的国际化函数或组件: ```jsx import { FormattedMessage, useIntl } from '@alicloud/console-components-intl-core'; ``` 通过`useIntl` hook获取国际化的API实例。 3. **配置国际化资源**: 通常情况下,你需要一个JSON文件(如`messages.json`)来存储翻译后的文本,内容结构如下: ```json { "your_key": "Your translated message", ... } ``` 将这个文件放在项目的static目录下,或者配置好Webpack等构建工具的全局路径。 4. **使用FormattedMessage**: 在组件中使用`FormattedMessage`来插入本地化消息,它接受两个参数:`id`(字符串键,对应资源文件中的key)和`values`(可选的占位符值): ```jsx <FormattedMessage id="welcome" values={{ name: 'John' }} /> ``` 当用户更改语言设置时,会自动根据当前的语言加载对应的翻译。 5. **动态加载语言**: 如果你想在运行时切换语言,可以使用`useIntl`提供的`changeLanguage`方法: ```jsx const onLanguageChange = (langCode) => { intl.changeLanguage(langCode); }; <button onClick={onLanguageChange}>切换语言</button> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值