不要将 HTML 标签放在翻译中。总之这是个坏主意。关注点分离的人都会对此发牢骚。
使用<Trans>组件如果react-i18next https://react.i18next.com/latest/trans-component
这样做：
// Component.js
<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>
以及对应的翻译文件：
// your locales/starwars_en.js file
translations: {
"Welcome, <1>User!</1>, here's your <3>broom</3>": "Welcome, <1>young padawan!</1>, here's your <3>light saber</3>",
}
这些数字<1>和<3>会让你觉得随机但等待它：
Trans.children = [
'Welcome, ', // index 0
'<strong>User!</strong>' // index 1
', please don't be ', // index 2
'<strong>weak</strong>', // index 3
' unread messages. ', // index 4
]
旁注（可以被认为是一种技巧，但可以节省大量时间）： react.i18next.com 上的人，在他们的文档中没有这个，但是您可以使用基本语言作为关键（在这种情况下是英语）。它可以节省您的时间，而不是像他们在文档中显示的那样重复翻译，我引用：
// Component file
import React from 'react';
import { Trans } from 'react-i18next'
function MyComponent({ person, messages }) {
const { name } = person;
const count = messages.length;
return (
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
);
}
// translation file
"userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
"userMessagesUnread_plural": "Hello <1>{{name}}</1>, you have {{count}} unread messages. <5>Go to messages</5>.",
无论如何“荣誉！” i18next 团队！你们太棒了，伙计们！
在这里 -疯了！