获取从React中的函数返回的字符串而不是html

Question

在我的 gatsby 博客（一个 React 组件）的顶部，我有一个获取 url 扩展名的函数，并根据它是图像还是视频返回一行 html，如下所示：

  const printPicOrVid = function(myUrl) {
    let fileExt =
      myUrl.substring(myUrl.lastIndexOf(".") + 1, myUrl.length) || myUrl
    if (fileExt === "jpg" || fileExt === "png" || fileExt === "gif") {
      return '<img src="https:' + myUrl + '" />'
    } else if (fileExt === "mp4") {
      return '<video src="https:' + myUrl + '"></video>'
    }
  }

它成功返回类似的字符串<img src="https://contentful.com/whatever/image.jpg" />

在我的反应页面的返回部分中，我有：

{edge.node.heroImage && printPicOrVid(edge.node.heroImage.file.url)}

也就是说：如果 contentful 中的 HeroImage 存在，则返回 jpg 或 mp4 html。问题是，我只是将 HTML 字符串打印到页面上，而不是按照预期渲染实际图像或视频的 html。

有一种感觉，这里的答案是危险地设置内部 HTML，但不确定如何实现。非常感谢任何帮助，谢谢。

Answer 1

当在函数中返回 JSX 时，您应该简单地返回您想要的 JSX 元素。所以你会写return <div/>而不是return '<div/>'. 所以：

return '<img src="https:' + myUrl + '" />'

应该

return <img src={"https:" + myUrl} />

否则你会返回一个字符串而不是 JSX。其他 return 语句也是如此，应该是：

return <video src={"https:" + myUrl}></video>