使用 React 和 Webpack 编辑 OpenWeatherMap 图标

Question

我目前正在使用 Webpack 学习 React。我正在寻找编辑 OpenWeatherMap's data 提供的图标。

但是，他们的图标以数字开头。一个例子是“10d”。在Javascript中，不允许创建以数字开头的变量。

我该如何解决这个问题？我正在为我的 webpack

使用 file-loader

我的解决方案

找到我自己的自定义图标并根据 API 的图标名称命名。
import 01d from "./WeatherIcons/10d.svg"（这行不通，因为 Javascript 不允许导入数字）
获取 API 数据并将 setState 设置为 currentIcon as currentIco: ./WeatherIcons/${current.weather[0].icon}.svg
根据数据使用图像源。 <img src={this.state.currentIcon} />

感谢您调查这个问题。感谢您的帮助，如果您需要更多信息，请联系我。

Answer 1

是的，您不能使用以数字开头的变量。但是您可以重写您的导入语句。

import 01d from "./WeatherIcons/10d.svg"

前面的代码意味着您只需导入默认导出。您可以根据需要命名默认值。

考虑以下示例：

import defaultIcon from "./WeatherIcons/10d.svg"

import {namedIcon} from './allIcons'

这转化为以下代码（已编辑）：

var importHelperVar = require("./WeatherIcons/10d.svg");

var defaultIcon = importHelperVar && importHelperVar.__esModule ? importHelperVar : { default: importHelperVar };

var allIcons = require("./allIcons");
var namedIcon = allIcons.namedIcon;

这意味着您只需重命名您的图标就可以了。

使用 React 和 Webpack 编辑 OpenWeatherMap 图标

Editing OpenWeatherMap Icon with React and Webpack

javascript

json

reactjs

webpack

openweathermap