Javascript 翻译里面的元素

我使用

react-i18next

库翻译我的react组件。它工作正常，但如果在

.map

中使用

组件，则无法正常工作。看看这个例子：

 render() {
    let optionItems = this.state.countries.map(countries =>
        <option key={countries.id}>{countries.name}</option>
      );
    let countriesItems = this.state.countries.map(countries =>
        <option key={countries.id}><Trans>{countries.name}</Trans></option>
      );
      return(
        <div>
            <ul>{optionItems}</ul>
            <div>
                <ul>{countriesItems}</ul>
            </div>
        </div>
      );
  }

render（）{
让optionItems=this.state.countries.map（countries=>
{国家名称}
);
让countriesItems=this.state.countries.map（countries=>
{国家名称}
);
返回(
{optionItems}
{countriesItems}
);
}

---

第一个变量

optionItems

通常显示国家，但第二个变量

countriesItems

仅显示

[object object]

。我尝试用一个国家的名称替换{countries.name}，但结果是一样的。有什么想法吗？

你能在某个地方发布一个工作示例来演示这个问题吗？我从来没有使用过这个库，所以我不想冒险给出答案，但可以从关于如何与列表一起使用的文档中看到：