我想介绍一个多语言系统。我有一个函数组件,它返回基于所选语言的特定元素的翻译(来自API)。
在我将翻译后的元素放入表单(选项值、占位符等)之前,一切都运行良好--然后它显示为[object object]。
这就引出了两个问题:
1.是否可以将此组件作为HTML表单可以接受的字符串之类的东西返回?
1.有没有可能把上下文消费者应用到纯JS函数中,这样它就不会返回一个React组件,而是返回一个原始值?
翻译部分:
const Translation = ({ element }) => {
let translation;
return (
<LanguageConsumer>
{({ language }) => {
switch (language) {
case "pl":
translation = plTranslation;
break;
case "en":
translation = enTranslation;
break;
default:
translation = enTranslation;
}
return translation[element];
}}
</LanguageConsumer>
);
};
示例:
<option value="en">
<Translation element="globalLanguageEnglish" />
</option>
先谢谢你的帮助。
2条答案
按热度按时间bis0qfac1#
我可以确认它不起作用-
<option>
html元素内容可以是“文本,可能带有转义字符(如é
)”。React组件只能返回字符串,它完全有效(并按OP规定工作)......但不支持此用例。
使用组件只返回一个字符串不是一个好的选择。**当你需要在一个组件中有许多翻译的字符串时,它可能是无效的。**React必须将它作为组件来管理,控制属性,呈现,进行协调等。许多相同类型(只有不同的属性)的以下组件(兄弟)应该是
key
-ed。更智能的解决方案:在本例中,将一个选项(键)数组作为prop传递,使用一个组件在循环中呈现所有已转换的
<option>
元素(使用fragment返回),例如:看看它是如何在现成的i18 n解决方案,如
i18next
描述here-传递函数't'
和使用它来访问您的翻译。5kgi1eie2#
我也有类似的需求,我需要支持翻译后的字符串,并希望从react组件返回一个“string”,我希望能够在
render
节中使用该组件进行典型的函数调用,下面是我最终完成的工作。这是react组件,返回“string”值。我使用redux来存储字符串字典,但是你可以使用其他的东西。
下面是一个示例,说明如何将组件用于典型的函数调用,并作为
render
中的组件使用: