有没有办法将React Component作为字符串而不是对象返回？

Question

我想介绍一种多语言系统。 我有一个功能组件，可以根据所选语言（从Context API）返回特定元素的翻译。

一切正常，直到我将转换后的元素放入表单（选项值，占位符等）中，然后它才显示为[object object]。

这就是两个问题的产生：

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

2. 是否可以将上下文使用者应用于纯JS函数，因此它不返回React组件，而是返回原始值？

翻译组件：

Event set
Performing action
Finished run

示例：

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>
  );
};

预先感谢您的帮助。

Answer 1

使用组件仅返回字符串是一个错误的选择。当您在一个组件中需要许多已翻译的字符串时，这会非常无效。

看看here之类的i18next这样的现成的i18n解决方案是如何完成的-传递函数't'并使用它来访问您的翻译。