javascript - 在 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" /> 的字符串

在我的 react 页面的返回部分:

{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>