Reactjs 从函数React.JS返回图像

所以，如果外面下雨，我会尝试返回一个雨伞图标，但我得到的只是一把雨伞，今天会下雨，而不是图像

我的职能是：

function rain(x){
    if (x.includes("rain"))
        return <img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} /> + " Get an umbrella, it will rain today!";
}

功能雨（x）{
如果（x.包括（“雨水”））
return+“拿把伞，今天会下雨！”；
}

我调用函数的那一行：

<p className={classes.info}>{rain(props.responseObj.weather[0].description)}</p>

{rain（props.responseObj.weather[0].description）}

---

如何从React中的函数返回图像？

尝试以下操作：

功能雨（x）{
如果（x.包括（“雨水”））
返回
(
拿把伞，今天要下雨

);
}

您正在将

jsx

元素与

字符串连接起来。移除
+
并将
img
和
文本
包装在
React.Fragment（）内：

功能雨（x）{
如果（x.包括（“雨水”））
返回(
拿把伞，今天要下雨！
);
}
您正在返回一个对象并向其添加一个字符串。那是不行的。您必须返回某种类型的对象。您不能通过
+
将字符串添加到对象中，并期望它成为正确的HTML元素。如果不想返回
或
或任何其他容器中的文本，可以执行以下操作：

return (<>
<img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
Get an umbrella, it will rain today!
</>)

返回(
拿把伞，今天要下雨！
)

注意
是一个空片段。因为返回只能返回1个对象，所以将所有对象放在一个空片段中，以便返回。如果使用
而不是
或任何其他容器，也可以实现这一点。使用空片段的好处是，通过不将每个元素都包装在其中，可以最大限度地减少
元素或其他元素的使用

还有一些建议：


使用箭头函数（）=>
在渲染零件中，使用组件函数而不是普通函数-更易于阅读
并且，例如在您的例子中，如果您只想使用条件呈现事物的特定部分，而不是基于条件返回，请在render中执行，因为从现在开始，在代码中，如果if语句变为FALSE，它将返回，因此从客户端，页面中只有一个空的
元素
有一种更好的归档方法，可以使用：

{x.includes（'rain'）&&(
拿把伞，今天要下雨！
)
}

说明：

它之所以有效，是因为在JavaScript中，
true&&expression
总是计算
到表达式，并且
false&&expression
的计算结果始终为false

因此，如果条件为true，则&&后面的元素将
显示在输出中。如果为false，React将忽略并跳过它

请注意，返回falsy表达式仍将导致
在&&之后将被跳过，但将返回falsy表达式。在
在下面的示例中，render方法将返回0

return (<>
<img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
Get an umbrella, it will rain today!
</>)

{x.includes('rain') && (<>
             <img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
             Get an umbrella, it will rain today!
           </>)
}