乐闻世界logo
搜索文章和话题

I am using ` react - i18next ` for translation and I need to give style to a certain part of string, how can I do that?

2 个月前提问
18 天前修改
浏览次数4

1个答案

1

在使用 react-i18next 进行国际化时,如果需要为翻译字符串中的特定部分添加样式,可以使用内置的 Trans 组件来实现。Trans 组件允许我们将翻译文本分成多个部分,并为它们应用不同的HTML标签或React组件。

以下是一个具体的例子来说明如何实现:

假设你有一个需求,需要对翻译文本中的名词添加特定的样式。首先,你需要在你的翻译文件中定义带有特殊标记的翻译字符串。例如,假设你有一个英文到中文的翻译文件 translation.json

json
{ "welcome_message": "Welcome, <1>{{name}}</1>!" }

在这里,<1>{{name}}</1> 部分将被 Trans 组件识别为可替换和样式化的元素。数字 1 是一个占位符索引,对应于传递给 Trans 组件的子元素数组中的位置。

接下来,在React组件中使用 Trans 组件并传递相应的元素:

jsx
import React from 'react'; import { useTranslation, Trans } from 'react-i18next'; function WelcomeMessage() { const { t } = useTranslation(); return ( <div> <Trans i18nKey="welcome_message" components={[<strong style={{ color: 'red' }} />]} > Welcome, <strong>{{name}}</strong>! </Trans> </div> ); }

在这个例子中,<strong style={{ color: 'red' }} /> 是传递给 Trans 组件的子元素,它对应于翻译文本中的 <1>{{name}}</1>。这样,{{name}} 将被替换为具有红色字体的加粗文本。

通过这种方式,你可以灵活地为翻译中的任何部分添加CSS样式或甚至是更复杂的React组件。

2024年6月29日 12:07 回复

你的答案