在Trans Component中使用现有的字符串区域设置

Question

我有3个字符串，它们与

下面的字符串包含相同的值

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

我将Trans组件用于welcome和contact

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

现在我不想重复Stackoverflow三次，我想在Trans component或任何其他方式中使用companyName，这样我就不必一遍又一遍地重复它。有什么解决办法吗?

Answer 1

你可以使用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>