有没有办法将 React 组件作为字符串而不是对象返回?

Question

我想介绍一个多语言系统。 我有一个函数组件，它根据所选语言(来自上下文 API)返回特定元素的翻译。

一切都运行良好，直到我将翻译后的元素放入表单(选项值、占位符等)中 - 然后它显示为 [对象对象]。

这就是两个问题诞生的地方：

1. 是否可以将此组件作为类似字符串的内容返回，HTML 表单会接受？

2. 是否可以将上下文消费者应用于纯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>

提前感谢您的帮助。

Answer 1

我可以确认它不起作用 -<option>html元素内容可以是"文本，可能带有转义字符(如é)"。

React 组件只能返回字符串，它是完全有效的(并且按照 OP 所述工作)......但不支持此用例。

使用组件只返回字符串不是一个好的选择。当您在一个组件中需要许多已翻译的字符串时，它可能无效。React 必须将其作为组件、控制道具、渲染、进行协调等进行管理。许多相同类型(只是不同的道具)的以下组件(兄弟姐妹)应该key-ed。

更智能的解决方案： 在这种情况下，传递一个选项(键)数组作为 prop，并使用一个组件在循环中呈现所有翻译的<option>元素(使用片段返回)，例如：

// get some translation fn f.e. from context
return (
<>
{props.items.map( item => <option key="{item}" value="{item}">{translate(item)}</option> )}
</>
)

看看它是如何完成的 i18n 解决方案，就像这里描述i18next- 传递函数't'并使用它来访问您的翻译。

Answer 2

我有类似的需求，我必须支持翻译的字符串，并希望从反应组件返回一个"字符串"。我希望能够在典型的函数调用和render部分中使用该组件。这是我最终所做的。

这是返回"字符串"值的反应组件。旁注：我正在使用 redux 来存储字符串字典，但您可以使用其他东西。

import { useSelector } from 'react-redux';
export function StringValue({ stringId }) {
const myStrings = useSelector((state) => state.strings);
// Note: do your own error handling as required
return myStrings[stringId];
}

下面是如何将组件与典型函数调用一起使用并作为render中的组件的示例：

import { StringValue} from 'StringValue';
...
export function MyComponent(){
...
return (
<>
{console.log('StringValue ', StringValue({ sId: 'myStringKey' }))}
<StringValue sId="myStringKey" />
...