javascript 是否有办法将React Component作为字符串而不是对象返回?

ax6ht2ek  于 2023-02-07  发布在  Java
关注(0)|答案(2)|浏览(109)

我想介绍一个多语言系统。我有一个函数组件,它返回基于所选语言的特定元素的翻译(来自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>

先谢谢你的帮助。

bis0qfac

bis0qfac1#

我可以确认它不起作用-<option> html元素内容可以是“文本,可能带有转义字符(如&eacute;)”。

React组件只能返回字符串,它完全有效(并按OP规定工作)......但不支持此用例
使用组件只返回一个字符串不是一个好的选择。**当你需要在一个组件中有许多翻译的字符串时,它可能是无效的。**React必须将它作为组件来管理,控制属性,呈现,进行协调等。许多相同类型(只有不同的属性)的以下组件(兄弟)应该是key-ed。
更智能的解决方案:在本例中,将一个选项(键)数组作为prop传递,使用一个组件在循环中呈现所有已转换的<option>元素(使用fragment返回),例如:

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

看看它是如何在现成的i18 n解决方案,如i18next描述here-传递函数't'和使用它来访问您的翻译。

5kgi1eie

5kgi1eie2#

我也有类似的需求,我需要支持翻译后的字符串,并希望从react组件返回一个“string”,我希望能够在render节中使用该组件进行典型的函数调用,下面是我最终完成的工作。
这是react组件,返回“string”值。我使用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" />
    ...

相关问题