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

Posted 2023-02-22

【中文标题】有没有办法将 React 组件作为字符串而不是对象返回？

【英文标题】：Is there a way to return React Component as string instead of object?

【发布时间】：2019-10-22 10:26:34

【问题描述】：

我想介绍一个多语言系统。 我有一个函数组件，它根据所选语言（来自 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>

提前感谢您的帮助。

【问题讨论】：

你能分享一些代码吗？ React 可以正确渲染string 对象。您很可能尝试渲染 context 对象或其他东西。

没有代码/上下文很难提供帮助。但是，从您所描述的内容来看，您似乎想根据其名称动态呈现组件。 const ComponentToRender = 'MyComponent'; 和使用它就像<ComponentToRender />。因此，如果您有条件元素要渲染，您可以只传递组件 string 名称然后渲染它

对不起，我添加了一些代码。我想问题是我要返回整个消费者，而不仅仅是来自翻译对象的字符串元素。

还是不行。它总是以形式给出[object object]。即使您像const Value = () => "value" 那样做某事并将其传递给像<input type="text" placeholder=<Value /> 这样的输入占位符。 :-(

在这种情况下，您只需将Value 称为function，而不是将其呈现为component：<input type="text" placeholder=Value() />

【参考方案1】：

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

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

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

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

// 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' 并使用它来访问您的翻译。

【讨论】：

如果我想使用 React 的 useContext 并处理一些值然后将其作为原始字符串返回怎么办？有什么办法可以做到吗？

为什么有一个返回字符串的组件会更无效？您的回答没有给出任何有效的论据。 React 具有状态管理功能，在许多情况下，如果您仅在值更改时重新处理字符串，实际上会更有效。