получить строку вместо html, возвращенную из функции в React

Question

В верхней части моего блога gatsby (компонент реагирования) у меня есть функция, которая получает расширение 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" />

в моей return части страницы реакции, которую я имею:

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

, которая поговорка: если heroImage из contentful существует, то вернуть 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 <video src={"https:" + myUrl}></video>

Answer 2

Вам необходимо вернуть <div /> с атрибутом dangerouslySetInnerHTML, установленным в {{ __html: printPicOrVid(edge.node.heroImage.file.url) }}.

Полный код:

{edge.node.heroImage && <div dangerouslySetInnerHTML={{ __html: printPicOrVid(edge.node.heroImage.file.url) }} />}