JS使用concat拼接属性名作函数参数无法生效问题

需要动态拼接取值逻辑传入绘图组件的Y轴属性，字符串拼接后控制台打印结果符合预期，但传入组件后功能失效。目标是精简当前冗长的switch分支代码。

• 可正常运行的硬编码写法：

switch (statement) {
  //CashFlow
  case 'changeInOperatingLiabilities':
    return (        
      <Fragment>
        <Plot 
          data={[{
            type: 'bar', 
            x: financialItem.fiscalDateEndingValues, 
            y: financialItem.changeInOperatingLiabilitiesValues
          }]}
          layout={{width: 900, height: 640, title: financialItemName}} 
          options ={{displaylogo: 'false'}}
        />
      </Fragment>
    );
}

• 无法正常运行的拼接写法：

switch (statement) {
  //CashFlow
  case 'changeInOperatingLiabilities':
    return (        
      <Fragment>
        <Plot 
          data={[{
            type: 'bar', 
            x: financialItem.fiscalDateEndingValues, 
            y:''.concat('financialItem.',statement,'Values')
          }]}
          layout={{width: 900, height: 640, title: financialItemName}} 
          options ={{displaylogo: 'false'}}
        />
      </Fragment>
    );
}

执行console.log(''.concat('financialItem.',statement,'Values'))输出结果为financialItem.changeInOperatingLiabilitiesValues，和预期文本一致。

字符串拼接得到的只是属性路径的文本内容，不是financialItem对象对应属性的实际值。相当于给y参数传了一段纯字符串，而非绘图需要的数组数据，组件自然无法正常渲染。

不需要拼接字符串路径，直接使用JS方括号动态属性语法读取对象对应属性即可，还可以直接删掉冗余的switch分支：

return (        
  <Fragment>
    <Plot 
      data={[{
        type: 'bar', 
        x: financialItem.fiscalDateEndingValues, 
        // 动态取financialItem下 `${statement}Values` 对应的属性值
        y: financialItem[`${statement}Values`]
      }]}
      layout={{width: 900, height: 640, title: financialItemName}} 
      options={{displaylogo: 'false'}}
    />
  </Fragment>
);

当statement值为changeInOperatingLiabilities时，financialItem[${statement}Values]和硬编码写法financialItem.changeInOperatingLiabilitiesValues的取值完全一致，直接返回Y轴需要的真实数据，没有额外的字符串转换逻辑。后续新增同规则的报表项不需要额外写分支判断，代码精简度符合预期。

内容的提问来源于stack exchange，提问作者MrPie