javascript - 基于字符串连接从对象中获取值

问题描述

我有一个使用 React 和 Typescript 编写的小型网站，可与 Spring 引导后端一起使用。我现在正在尝试在其上实现多种语言，但我遇到了一个问题。

在实施语言之前，问题不存在，因为我可以根据它的名称获取值：

<div className="product-category-list">
  {props.productCategory.map(function (item, id) {
    return <div className="product-category-div">
      <img className="product-category-image" src={"data:image/png;base64, " + item.picture}/>
      <p className="product-category-title">{ item.name }</p>
    </div>
  })}
</div>

这导致在item.name网站上以应有的方式显示的价值。

现在代码不同了，因为 item 的 name 属性已更改为多个值（nameEN、nameFR、nameNL、...）。为了实现这一点，语言被保存在应用程序中并且可以被调用。所以现在代码如下：

<div className="product-category-list">
  {props.productCategory.map(function (item, id) {
    return <div className="product-category-div">
      <img className="product-category-image" src={"data:image/png;base64, " + item.picture}/>
      <p className="product-category-title">{ "item.name".concat(getLanguage().toUpperCase()) }</p>
    </div>
  })}
</div>

由于此更改，网站显示字符串item.nameEN或item.nameNL在前端而不是值。我已经尝试了几种修复方法并对其进行了研究，但我找不到有关此特定问题的任何信息。

我正在寻找一种能够获取基于字符串连接构建的项目键值的方法。任何帮助将不胜感激，因为我非常卡住。

谢谢！

标签： javascriptreactjstypescript

让我们看一下您之前所说的有效代码：

{ item.name }

在这里，您正在访问name对象的属性item。

在您的新代码中：

{ "item.name".concat(getLanguage().toUpperCase()) }

在这里，您只是返回一个带有值的字符串，"item.nameEN"而不是访问名为item.

您想要的是仍然可以访问item，但是使用您正在动态构建的密钥来执行此操作。尝试这个：

{ item["name" + getLanguage().toUpperCase()] }

javascript - 基于字符串连接从对象中获取值

问题描述

解决方案

推荐阅读