react i18n - 函数作为 React 子级无效答案

【问题标题】：react i18n - Functions are not valid as a React childreact i18n - 函数作为 React 子级无效
【发布时间】：2021-07-18 15:57:43
【问题描述】：

我正在尝试使用 i18n 在我的类组件中进行本地化。

这就是我所拥有的：

import React, { Component } from "react";
import { render } from "react-dom";

import i18n from '../i18n';
import { withTranslation } from 'react-i18next';

var termFlag = require("../json/terms_flag.json")
var termHelper = require("../json/terms_helper.json")

class Terms extends Component {
    constructor(props){
        super(props)
        this.state={
            terms:null,
            termsIsLoaded:false
        }
    }
render(){
    const { t } = this.props;
return(
    <div>
    <h1>{t('terms)}</h1>
    {this.state.termsIsLoaded &&
        <pre>{this.state.terms.en}</pre>
    }
    <button onClick={()=>{this.props.parentcallback("Form")}}>click</button>
    </div>
)}
}

export default withTranslation(Terms) ///<-- this cost the problem

我遇到了一个错误：

函数作为 React 子级无效。如果您可能会发生这种情况返回一个组件而不是从渲染。或者也许你意味着调用这个函数而不是返回它。

我该如何解决这个问题？

【问题讨论】：

标签： reactjs

【解决方案1】：

你还没有终止你的字符串：

import React, { Component } from "react";
import { render } from "react-dom";

import i18n from '../i18n';
import { withTranslation } from 'react-i18next';

var termFlag = require("../json/terms_flag.json")
var termHelper = require("../json/terms_helper.json")

class Terms extends Component {
    constructor(props){
        super(props)
        this.state={
            terms:null,
            termsIsLoaded:false
        }
    }
render(){
    const { t } = this.props;
return(
    <div>
    <h1>{t('Terms')}</h1>
    {this.state.termsIsLoaded &&
        <pre>{this.state.terms.en}</pre>
    }
    <button onClick={()=>{this.props.parentcallback("Form")}}>click</button>
    </div>
)}
}

export default withTranslation(Terms) ///<-- this cost the problem

这应该可行。

【讨论】：