i18n数组元素的反应组件

Question

我想用universe:i18n来翻译我的流星应用程序（使用反应）。

在这个组件，你可以看到，我通过使用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> 
     ); 
    } 
} 

I18N/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) }`} /> 

Source。