如何在React组件中通过动态变量以点表示法调用react-nba-logos图标组件

这个需求完全可以实现。
你最初的写法失效是因为JSX中的点语法会将NEW_VAR视为固定的属性名，而非动态读取变量的值，无法匹配到对应图标组件。你可以通过对象方括号访问语法，动态获取对应三字码的图标组件后再渲染即可，示例代码如下：

import React from 'react';
import * as NBAIcons from 'react-nba-logos';

const Example = () => {
  const NEW_VAR = 'NYK';
  // 动态获取对应球队的图标组件
  const TargetLogo = NBAIcons[NEW_VAR];
  // 增加判空逻辑，避免传入无效三字码时出现渲染报错
  return TargetLogo ? <TargetLogo /> : null;
};

export default Example;

如果需要给图标传递尺寸、颜色等属性，直接给动态取出的组件传参即可，示例：

<TargetLogo size={64} fill="#17408B" />

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