reactjs i18next 使用 json 数组翻译 const

Question

我的收藏（

bananeData

）要翻译

export const bananeData = [
  {
    id: 1,
    periode: 'text to translate', 
    info:'text to translate',
    picture: './media/banane.png'
  },
{
    id: 2,
    periode: ...,
    info: ...,
    picture: ...
  }
]

import React, {Component} from 'react';
import { bananeData } from '../data/bananeData';
import Banana from "./Banana";
import { withNamespaces } from "react-i18next";

class BananaList extends Component {
    state = {
        projects:bananeData
    };

    render() {
        let {projects} = this.state;

        const { t } = this.props;

        return (
            <div>
                <h3>{t('navigation_bananes')}</h3>

                <div>
                    {
                        projects.map(item => {
                            return (
                                <Banana
                                    key={item.id}
                                    item={item}
                                />
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}
export default withNamespaces()(FreelanceList);

我的香蕉课

import React, {Component} from 'react';

export default class Banana extends Component {
    state = {
        showInfo: false
    }

    handleInfo = () => {
        this.setState({
            showInfo:!this.state.showInfo
        })
    }

    render() {
        let {name, periode, info, picture} = this.props.item

        return (
            <div className="project">
                <h5>{periode}</h5>
                <h3>{name}</h3>
                <img src={picture} alt="" onClick={this.handleInfo} />
                <span className="infos" onClick={this.handleInfo} >
                    <i className="fas fa-plus-circle"></i>
                </span>

                {
                    this.state.showInfo && (
                        <div className="showInfos">
                            <div className="infosContent">
                                <div className="head">
                                    <h2>{name}</h2>
                                </div>
                                <p className="text">{info}</p>
                                <div className="button return" onClick={this.handleInfo}>close</div>
                            </div>
                        </div>
                    )
                }

            </div>
        );
    }
}

我的

i18next

文件：

import i18n from 'i18next';
import backend from 'i18next-xhr-backend';
import detector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';

import translationEN from './public/locales/en/translation.json';
import translationDE from './public/locales/de/translation.json';
const fallbackLng = 'en';

// the translations
export const languageResources = {
    de: {
        translation: translationDE
    },
    en: {
        translation: translationEN
    }
};

i18n
    .use(detector)
    .use(backend)
    .use(reactI18nextModule) 
    .init({
        lng: 'en',
        resources: languageResources,
        fallbackLng: fallbackLng, 

        keySeparator: false, 

        interpolation: {
            escapeValue: false 
        }
    });

export default i18n;

我用：

"i18next": "^21.6.13",
"i18next-browser-languagedetector": "^6.1.3",
"i18next-xhr-backend": "^3.2.2",

Answer 1

我已经下载并测试了你的代码；显然，您正在将

react-i18next

与

v9

版本一起使用。以下是在您的案例中使用它的两种方法 - 也请查看我的评论。

首先，更“常规”的方式（为了便于理解，我尝试尽可能少地更改你的代码）。

Banana.js

：

import React, { Component } from 'react';

import { withNamespaces } from "react-i18next";

class Banana extends Component {
    state = {
        showInfo: false
    }

    handleInfo = () => {
        this.setState({
            showInfo: !this.state.showInfo
        })
    }

    render() {
        // Be careful that you do not have `name` defined in `bananeData`;
        // do u mean `key` instead?
        let { name, periode, info, picture } = this.props.item

        // wrap everything you need with i18next; 
        // just make sure the `key` is already defined in `translation.json`, 
        // and then everything is fine.
        const { t } = this.props;

        return (
            <div className="project">
                <h5>{t(periode)}</h5>
                <h3>{t(name)}</h3>

                <img src={picture} alt="" onClick={this.handleInfo} />
                <span className="infos" onClick={this.handleInfo} >
                    <i className="fas fa-plus-circle"></i>
                </span>

                {
                    this.state.showInfo && (
                        <div className="showInfos">
                            <div className="infosContent">
                                <div className="head">
                                    <h2>{t(name)}</h2>
                                </div>
                                <p className="text">{t(info)}</p>
                                <div className="button return" onClick={this.handleInfo}>close</div>
                            </div>
                        </div>
                    )
                }

            </div>
        );
    }
}

// You have to specify the `namespace` with `translation`. 
// so `react-i18next` can understand which `JSON` file you refer to.
// Or you could define it in the `i18next.js` file with `defaultNS`.
export default withNamespaces('translation')(Banana);

BananaList.js

：

import React, { Component } from 'react';
import { bananeData } from '../data/bananeData';
import Banana from "./Banana";
import { withNamespaces } from "react-i18next";

class BananaList extends Component {
    // same as what you write; nothing has changed in this part.
    ...
}

// Keep this as you still have to use `react-i18next` with `navigation_bananes`.
// I also changed the export to `BananaList` as I do not find `freelanceList` from your code.
export default withNamespaces('translation')(BananaList);

---

第二种，不太“传统”的方式，但你可以尽量减少打电话

react-i18next

。

BananaList.js

：

import React, { Component } from 'react';
import { bananeData } from '../data/bananeData';
import Banana from "./Banana";
import { withNamespaces } from "react-i18next";

class BananaList extends Component {
    state = {
        projects: bananeData
    };

    render() {
        let { projects } = this.state;

        const { t } = this.props;

        return (
            <div>
                <h3>{t('navigation_bananes')}</h3>

                <div>
                    {
                        projects.map(item => {
                            // map the data as key to `react-i18next` here, 
                            // especially if you don't need it in class `Banana` anyway.
                            let newItem = item;
                            newItem.info = t(item.info);
                            newItem.periode = t(item.periode);
                            return (
                                <Banana
                                    key={newItem.id}
                                    item={newItem}
                                />
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}
// Same as adding the required namespace and rewriting to `BananaList`.
export default withNamespaces('translation')(BananaList);

---

希望以上两种解决方案对您有所帮助。