Как перевести строку в компонент, используя реагировать-i18next? - PullRequest
Новая
       14

Как перевести строку в компонент, используя реагировать-i18next?

0 голосов
/ 04 июня 2019

У меня есть выпадающее меню, в котором перечислены опции 1, 2 и 3. Я хотел бы перевести эти варианты, используя Reaction-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>
        );
}

Может ли кто-нибудь дать представление о том, как это сделать ... или помочь мне решить эту проблему. спасибо.

1 Ответ

0 голосов
/ 04 июня 2019

react-i18next содержит довольно хорошую документацию, а также предлагает примеров .

Вам необходимо обернуть ваш компонент в оболочку 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);
...