如何在带有构造函数的 class 组件中使用 t() 函数？

Question

Using i18next with react，我想在class组件中使用t()函数，但大多数时候，我还需要初始化状态，所以我也想有一个构造函数。

在 documentation here 之后我得到了这个：

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 只有一个 i18n? 可为空的类型，并且我无法向 ExampleProps 添加任何内容，因为我得到 Property 'newProperty' is missing in type 'WithTranslationProps' but required in type 'ExampleProps'.

const t1 = this.props.i18n?.t; 尝试调用 t('Test').

时结果为 TS2722: Cannot invoke an object which is possibly 'undefined'

const t2 = this.props.t; 不存在。

一个解决方案，如果我直接在class中初始化状态，如：

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

    render() {

虽然我还是很想知道这里有没有办法使用构造函数

Answer 1

根据 documentation

，在 React 构造函数和超级方法中接收 0 个参数或 1 个参数（如果是 1，则它们应该是 props）

在你的渲染中你可以这样做

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

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

对组件 props 的这种解构使您的代码更具可读性，如果您需要更多来自 props 的变量，只需添加一个逗号和变量名称，它就可以在该函数中使用。

除此之外你的代码看起来还不错

Answer 2

来自 React documentation:

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

但是，等一下，你传给constructor的context是什么？

你只需要传递props作为constructor的参数。

constructor(props)

如何在带有构造函数的 class 组件中使用 t() 函数？

How to use the t() function in a class component with a constructor?

typescript

i18next

reactjs

react-i18next