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

Question

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

一切正常，直到我将翻译后的元素放入表单(选项值、占位符等) - 然后它显示为 [object object]。

这就是产生2个问题的地方:

是否可以将此组件作为字符串返回，HTML 表单会接受哪些内容？

是否可以将上下文使用者应用于纯 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 必须将其作为组件进行管理，控制 props，渲染，进行协调等。许多相同类型(仅不同 props)的后续组件(兄弟)应该是 key -ed。
更智能的解决方案 :
在这种情况下，传递一组选项(键)作为 prop 和 使用一个组件渲染所有翻译 <option>循环中的元素 (使用片段返回)，f.e.像这样:

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

看看它是如何在准备好的 i18n 解决方案中完成的，例如 i18next描述 here - 传递函数 't'并使用它来访问您的翻译。