如何使用 react-i18next 翻译组件中的字符串？

Question

我有一个下拉菜单，其中列出了选项 1、选项 2 和选项 3。我想使用 react-i18next 翻译这些选项。我是翻译和使用这个框架的新手。

下面是代码，

export default class Example extends React.Component {
    render() {
        return (
            <ParentComponent>
                <button type="button">
                    {this.props.placeholder}
                </button>
                {this.props.values.map(value => (
                    <Item
                        key={value[this.props.value_prop]}
                        value={value}
                        on_select={this.change}>
                        {value[this.props.label_prop]} // i want to 
                        translate this
                    </Item>
                ))}
            </ParentComponent>
        );
}

有人可以提供有关如何解决此问题的想法...或帮助我解决此问题。谢谢。

Answer 1

react-i18next 包含非常好的文档，他们还提供了一些 examples.

您基本上需要将您的组件包装在 withTranslation 包装器中并使用 t 道具：

import { useTranslation, withTranslation, Trans } from 'react-i18next';
import logo from './logo.svg';
import './App.css';

// use hoc for class based components
class LegacyWelcomeClass extends Component {
  render() {
    const { t, i18n } = this.props;
    return <h2>{t('title')}</h2>;
  }
}
const Welcome = withTranslation()(LegacyWelcomeClass);

您还没有发布完整的组件代码，但它应该是这样的：

class CompClass extends Component {
    render() {
        const { t, i18n } = this.props;
        return (
            <ParentComponent>
                <button type="button">
                    {this.props.placeholder}
                </button>
                {this.props.values.map(value => (
                    <Item
                        key={value[this.props.value_prop]}
                        value={value}
                        on_select={this.change}>
                        {t(value[this.props.label_prop])} // i want to translate this
                    </Item>
                ))}
            </ParentComponent>
        );
    }
}

const Comp = withTranslation()(CompClass);

如何使用 react-i18next 翻译组件中的字符串？

how to translate string in a component using react-i18next?

reactjs

react-i18next