如何在 JSX (react) 中正确使用 switch 语句？

Question

我有一个反应组件，它是一个天气仪表板。我正在尝试有条件地显示今天天气的图像。如果我可以在 src 属性中使用 JSX，那就太好了。这是我想做的一个例子...

我在我的组件顶部导入我的天气图像：

import rain from 'my image path'
import sun from 'my image path'

这是一个功能性的 React 组件。在我的组件中获取今天的天气并根据今天的天气将状态值 'weatherToday' 设置为 'rain'、'sun' 等。例如：

const [weatherToday, setweatherToday] = useState('rain');

现在，在我从我的组件返回的 HTML 中，我有一个 img 标签。在那个 img 标签的 src 属性中，我可以使用 JSX 吗？目前尚不清楚我是否可以，但到目前为止我一直在尝试的方法没有奏效。

这是我到目前为止的尝试。

      <img src={
      (() => {
            switch(weatherToday === 'rain') {
                case "rain": return rain;
                default: return sun;
              }
            })
      } ></img>

结果是损坏的图像 link。我做错了什么？

Answer 1

在你的组件函数中，你应该像下面这样声明和操作一个变量（当然也可以使用switch语句来实现）：

 let weatherImg = "";
    // and conditionally update it as required like below -
    if(weatherToday == rain) {
    weatherImg = "whatever image name you imported from image path"
    } else if (condition 2) {
    weatherImg = "path 2"
    } else if (condition 3) {
    weatherImg = "path 3"
    } else {
    weatherImg = "whatever default image you want to show"
    }

然后将 weatherImg 变量的值传递给图像标签中的 src 属性。

 <img src={weatherImg}></img>

这样写的一个好处是，阅读此代码的人可以快速浏览一下，因为它将位于 JSX 代码的顶部，并确定导致图像更改的条件。因此，将来如果需要进行任何更改，很容易进行更改，这与您展示的情况不同，坦率地说，我还没有尝试过，而且它看起来更难阅读，并且有评论部分指出的错误。

如何在 JSX (react) 中正确使用 switch 语句？

How to correctly use switch statement in JSX (react)?

javascript

jsx

reactjs

react-functional-component