reactjs 使用事务处理组件中现有的字符串区域设置

eqqqjvef  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(109)

我有3个字符串包含与以下字符串相同的值

translation: {
   "companyName": "Stackoverflow",
   "welcome": "Welcome to <1>Stackoverflow</1>",
   "contact": "Contact to <1>Stackoverflow</1>
}

我正在为welcomecontact使用Trans组件

<Trans i18nKey="welcome">
    Welcome to <strong>Stackoverflow</strong>
</Trans>
<Trans i18nKey="welcome">
    Contact to <strong>Stackoverflow</strong>
</Trans>

现在我不想重复Stackoverflow三次,我想在Trans组件中或以任何其他方式使用companyName,这样我就不必一次又一次地重复。有什么解决方案吗?

iq3niunx

iq3niunx1#

可以使用props将此值传递给翻译字符串:

样本代码:

const companyName = 'Stackoverflow';

<Trans i18nKey="welcome" companyName={companyName}>
  Welcome to <strong>{{companyName}}</strong>
</Trans>

<Trans i18nKey="contact" companyName={companyName}>
  Contact to <strong>{{companyName}}</strong>
</Trans>

产生的翻译字符串:

Welcome to <strong>Stackoverflow</strong>

Contact to <strong>Stackoverflow</strong>

相关问题