i18n用於react組件的數組元素

Question

我想使用universe:i18n來翻譯我的流星應用程序（使用react）。

在此組件中，您可以看到，我使用map()遍歷了一個數組，並希望將其類別作為翻譯輸出：

進口/ UI /組件/ example.jsx

import React, { Component }                 from 'react'
import i18n                                 from 'meteor/universe:i18n'

class Example extends Component {
    getCategories(index) {
        const categories = [ 'one', 'two', 'three' ]; // <-- Get correct translations of these elements
        return categories[index - 1];
    }

    render() {
        return (
            <div id="content">
                { this.props.sections.map((i) => {
                    return (
                        <div>
                            { this.getCategories(i.index) }
                        </div>
                    );
                }) }
            </div>
        );
    }
}

國際化/ de.i18.json

{
    categories: {
        one: 'Eins',
        two: 'Zwei',
        three: 'Drei'
    }
}

我試圖做到這一點

const T = i18n.createComponent()

class Example extends Component {
    getCategories(index) {
        const categories = [ 'one', 'two', 'three' ]; // <-- Get correct translations of these elements
        return categories[index - 1];
    }

    render() {
        return (
            <div id="content">
                { this.props.sections.map((i) => {
                    return (
                        <div>
                            <T>categories[{ this.getCategories(i.index) }]</T>
                        </div>
                    );
                }) }
            </div>
        );
    }
}

Answer 1

這是行不通的，因為您必須使用點號而不是布雷克符號，所以

<T>categories.{ this.getCategories(i.index) }</T>

代替

<T>categories[{ this.getCategories(i.index) }]</T>

但是它仍然不起作用，因為它將創建一個children數組，但是只接受字符串，因此請像這樣使用它：

<T children={`categories.${ this.getCategories(i.index) }`} />

來源 。