Question

我有一个翻译系统，可以根据键返回正确的翻译。这一切都由一个组件Translate处理：

import React from 'react';

const Translate = ({ ln }) => {

    return <span>{language[ln]}</span>
};

export default Translate;

问题在于，当我尝试在其中使用它时，例如：

<input type="text" placeholder=<Translate ln="text_input" /> />

问题是组件没有返回 - 当我将其插入<input />时执行，这意味着我的占位符将始终是[object Object]，有没有办法解决这个问题？

Answer 1

您无法转到placeholder React组件，因为placeholder您应该String而不是Object或String contains tags 。在这种情况下，我认为更好地将Translate拆分为耦合函数，并在Translate组件中使用它，并且只是一个按键返回正确翻译的函数，如此

const translate = (key) => {
  // Some code ... 
  return language[ln];
}; // returns string

const Translate = ({ ln }) => {
  return <span>{ translate(ln) }</span>
}; // return React compoent

<input 
  type="text" 
  placeholder={ translate('some key') } /> // pass string to placeholder

Answer 2

为什么你首先使用组件来翻译字符串？我认为这不是一个好的分离问题，使你的翻译不那么重复。

只需使用

之类的功能即可

<input type="text" placeholder={t('text')} />

例如，您可以使用像i18next这样的内容进行翻译，例如

<input type="text" placeholder={i18next.t('text')} />

在JSX参数中反映渲染组件

2 个答案: