0

所以我目前有一个weatherAPI，它将返回一个图标代码，它是一个字符串，并以数字、、、、等开头02d。01d现在，我想做的是根据图标代码动态拉入一个react svg组件。让我解释一下我是如何尝试这样做的，然后你可以看看是否有更好的方法来处理这个问题。01n04d

为简单起见，我将 API 的响应向下传递到dumb component. 然后我创建了一个文件夹weatherIcons，其中包含我所有的 svg 组件：

src
|_components
  |_dashboard
  | |_DumbComponent.js
  |_weatherIcons
    |_02d.js
    |_01d.js
    |_01n.js
    |_index.js

在我的DumbComponent.js我需要我所有的 svg 组件通过位于weatherIcons文件夹下的索引文件，如下所示：import * as Icon from '../common/svg/weatherIcons';

index.js文件夹内的文件weatherIcons将提供每个组件，例如：

export {default as 01d} from './01d';
export {default as 02d} from './02d';
export {default as 01n} from './01n';

这使我可以将这些文件称为我DumbComponent.js喜欢的方法中的方法：Icon.01d(). 然后这将返回src/components/weatherIcons/01d.js'. As you know though, this WON'T actually return that file, because a method cannot start with an integer and thus my dilemma. Nor can I give a name of01d ,02d ,01n like I did in myweatherIcons/index.js 文件中的 svg 组件。

我的想法是给他们一个以字符开头的名称间距：

export {default as code01d} from './01d';
export {default as code02d} from './02d';
export {default as code01n} from './01n';

然后尝试将 api 响应中的代码作为函数插入。Icon.code${apiRESPONSE}(). 有关如何完成此操作的任何想法或针对当前情况的任何其他解决方法。

附言。我已经研究过react-svg和其他 svg 导入器，并且更喜欢不采用将 svg 导入为 html 并通过路径的方法。

4

0 回答 0