如何使用 react-i18next <Trans> 组件来显示数组元素？

Question

我使用以下Trans组件能够以粗体或斜体打印部分文本：

<Trans i18nKey="namespace:text" >
<strong></strong><i></i>
</Trans>

我的json看起来像这样：

"text": "This part should be <0>bold</0> and this one <1>italic</1>.",
"list": [
"Listelement <1>number</1> one.",
"This is the <0>second</0> listelement",
"<0>one</0> more <1>element</1>"
]

对于文本元素，这完全可以。但我也想从json中打印出一个列表。我通常使用以下代码片段：

{this.props.t('namespace:list', {returnObjects:true}).map((item,index) => (
<li key={index}> {item} </li>
))}

现在我想使用Trans组件，以便在我的列表中也有粗体和斜体单词。我试过了：

{this.props.t('namespace:list', {returnObjects:true}).map((item,index) => (
<li>
<Trans i18nKey={"namespace:list."+index} >
<strong></strong><i></i>
</Trans>
</li>
))}

但我的清单是空的。

如何将组件用于数组元素？

Answer 1

您可以将项自身作为i18nKey传递。

{
this.props.t('namespace:list', { returnObjects: true }).map((item) => (
<li>
<Trans i18nKey={item} components={[<strong />, <em />]} />
</li>
));
}

顺便说一句，最好使用components道具来传递一个组件数组。

一个工作示例：

https://codesandbox.io/s/react-i18next-trans-with-list-items-drcei?file=/src/app.js

Answer 2

我过去也像@felixmosh描述的那样做，但我最近在i18nConfig中添加了一个missingKeyHandler函数，当缺少翻译键时，它会记录一个警告。

如上所述使用<Trans>组件将记录一个警告，因为在翻译文件中找不到密钥。实际需要的是将<Trans>组件仅用于插值，而不用于平移。幸运的是，可以覆盖t函数。这是我为此编写的一个自定义组件：

interface InterpolateProps {
value: string;
components: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement };
}
export const Interpolate: React.FC<InterpolateProps> = ({ value, components }) => {
return <Trans i18nKey={value} t={(s: string) => s} components={components} />;
};

然后可以像一样使用

<Interpolate value="Some already translated text with a <Link>Link<Link>" components={{Link: <NextLink href="" />}}/>