Блог

Главная - Вопросы по программированию - Как использовать функцию t() в компоненте класса с конструктором?

Как использовать функцию t() в компоненте класса с конструктором?

reactjs #typescript #i18next #react-i18next

#reactjs #typescript #i18next #реагировать-i18next

Вопрос:

Используя i18next с react, я хотел бы использовать t() функцию в компонентах класса, но в большинстве случаев мне также нужно инициализировать состояние, поэтому я хотел бы также иметь конструктор.

Следуя документации здесь, я получаю это:

 import React from 'react';
import {WithTranslation, withTranslation} from "react-i18next";

interface ExampleProps extends WithTranslation {

}

interface ExampleState {

}

class Example extends React.Component<ExampleProps, ExampleState> {
    render() {
        const t = this.props.t;
        return (
            <div>
                <p>{t('Test')}</p>
            </div>
        );
    }
}

export default withTranslation()(Example);

Это работает нормально, здесь проблем нет. Пока я не добавлю конструктор:

     constructor(props: ExampleProps, context: any) {
        super(props, context);
    }

withTranslation не будет работать с этим:

 TS2345: Argument of type 'typeof Example' is not assignable to parameter of type 'ComponentType<WithTranslationProps>'.   Type 'typeof Example' is not assignable to type 'ComponentClass<WithTranslationProps, any>'.     Types of parameters 'props' and 'props' are incompatible.       Type 'WithTranslationProps' is missing the following properties from type 'WithTranslation<"translation">': t, tReady

введите описание изображения здесь

Если я использую interface ExampleProps extends WithTranslationProps {} несовместимость типов, она исчезает, но я не могу получить доступ к t функции, потому WithTranslationProps что у only есть i18n? тип с нулевым значением, и я ничего не могу добавить к ExampleProps , потому что я получаю Property 'newProperty' is missing in type 'WithTranslationProps' but required in type 'ExampleProps'.

const t1 = this.props.i18n?.t; результаты TS2722: Cannot invoke an object which is possibly 'undefined' при попытке вызова t('Test') .

const t2 = this.props.t; не существует.

Одно из решений, если я просто инициализирую состояние непосредственно в классе, например:

 class Example extends React.Component<ExampleProps, ExampleState> {
    state = {
      // set state here
    }

    render() {

Хотя я все равно хотел бы знать, есть ли способ использовать конструктор здесь.

Ответ №1:

Из документации React:

Если вы не инициализируете состояние и не привязываете методы, вам не нужно реализовывать конструктор для вашего компонента React.

Но, подождите минутку, что context вы передали constructor ?

вам нужно только передать props в качестве параметра constructor .

конструктор (реквизит)

Комментарии:

1. Верно. Я автоматически сгенерировал конструктор с помощью IDE, отсюда и два параметра. Если я передаю только реквизиты, все работает так, как ожидалось. Спасибо.

Ответ №2:

В конструкторе react и методах super получают либо 0 параметров, либо 1 (если это 1, то они должны быть реквизитами), согласно документации

В вашем рендеринге вы можете просто сделать

 render () {
   const { t } = this.props;

   return (
            <div>
                <p>{t('Test')}</p>
            </div>
        );
}

Эта деконструкция реквизитов компонентов делает ваш код более читаемым, если вам нужно больше переменных из реквизита, просто добавьте запятую и имя переменной, и ее можно будет использовать внутри этой функции.

В остальном ваш код выглядит нормально

Метки: