不要在翻译中放置HTML标签,这是个坏主意。关注点分离的人会对此大惊小怪。
如果使用
react-i18nexthttps://react.i18next.com/latest/trans-component,请使用
<Trans>
组件。
操作步骤如下:
<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>
以及相应的翻译文件:
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, ',
'<strong>User!</strong>'
', please don't be ', // index 2
'<strong>weak</strong>', // index 3
' unread messages. ',
]
附注(可以考虑作为一种技巧,但可以节省大量时间):React.i18next.com的这些人在他们的文档中没有提到,但是你可以将基础语言(在这种情况下是英语)用作键。这样可以节省时间,不需要像他们在文档中展示的那样进行双重翻译,我引用如下:
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>
);
}
"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>.",
无论如何,“Kudos!”给i18next团队!你们太棒了,伙计们!
在这里 -
go nuts!