如何使用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.I 中打印出一个列表，通常使用以下代码片段：

{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 prop 来传递组件数组。

一个工作示例：

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

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

How to use react-i18next <Trans> Component to display array elements?

reactjs

i18next