react中使用reacti18next+ts的坑

先上报错，这是我在组件页面定义变量的时候碰到的，如下

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.
Type 'object' is not assignable to type 'ReactNode'.


react-i18next是react中国际化最常用的插件，最近本人在做一个ts+国际化的项目，
首先我按照官网的示例代码进行配置，新建i18n并创建config.ts，配置如下

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translation_en from "./en.json";
import translation_zh from "./zh.json";
const resources = {
en: {
translation: translation_en,
},
zh: {
translation: translation_zh,
},
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: "zh",
// keySeparator: false, // we do not use keys in form messages.welcome
// header.slogan
interpolation: {
escapeValue: false, // react already safes from xss
},
});
export default i18n;


标准的引入方式，然后我们再去组件进行渲染定义我们的变量，
根据官方标准，class组件我们需要使用HOC方式来引入

import { withTranslation, WithTranslation } from "react-i18next"


然后再包裹我们自己的组件

class HomeComonent extends React.Component<any & WithTranslation> {
render(){
const {t} = this.props
return (<>
{
t('home.title')
}
</>)
}
}
export const Home = withTranslation()(HomeComonent)


按理来说，如上就可以正常渲染了，但是我这边却提示报错，如下

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.
Type 'object' is not assignable to type 'ReactNode'.


如上，明显是ts的报错阻塞了，那么我们就需要换一种方式来引入，

import { Trans } from "react-i18next"


然后再需要使用的地方进行包裹

<p>
<Trans>home.title</Trans>
</p>
就可以解决如上报错，当然，这只是个人解决的方法，如果有更治本的方式，希望大家留言


顺便补充一下第三种定义方式，use钩子类型，适用于函数式组件

import React from "react";
import { Layout, Typography } from "antd";
import { useTranslation } from "react-i18next";
export const Footer: React.FC = () => {
const { t } = useTranslation()
return (
<Layout.Footer>
<Typography.Title level={3} style={{ textAlign: "center" }}>
{
t('home.title')
}
</Typography.Title>
</Layout.Footer>
);
};