通过翻译后的文字作为道具

Question

对于本地化，我使用React-intl。我在下面导出（intl.js）-

import { injectIntl } from 'react-intl';

const Intl = injectIntl(({ intl, children }: any) => children(intl));

const t = (
id: string | Array<string>,
values: Object | void,
) => <Intl>{i => i.formatMessage({ id }, values)}</Intl>;

export default t;

在需要翻译字符串的地方，我要导入-

import t from '../../../components/intl.js';

我有定义了翻译的en.json文件，例如-

"tri-pod":"tripod"

我可以使用类似-

的翻译

<span>{t`tri-pod`}</span>

我面临的问题是如何在发送如下所示的道具时使用翻译-

<mylabel label="tripod"></mylabel>

添加标签= {t tri-pod}错误。 将翻译后的字符串本身作为道具发送的正确方法是什么？

Answer 1

names(which(colSums(srce != trgt, na.rm = TRUE) > 0)) [1] "a" "b" 帮助程序的问题在于，它不输出i18n帮助程序期望的转换后的字符串，而是输出t元素。这限制了它的可能用途。

为了使用<Intl>获得翻译后的字符串，可能应使用更高阶的组件来增强该组件：

t

然后const withT = Comp => injectIntl(({ intl, ...props}) => <Comp t={(id, values) => intl.formatMessage({ id }, values)} {...props} />); 助手将在增强组件中作为t道具提供。