Как добавить тег script в React/JSX

Возможно, вы сталкивались с ситуациями, когда вам нужно включить сторонний javascript непосредственно в ваше react-приложение, например, включить скрипт аналитики или какую-то библиотеку прямо из CDN. В этой статье мы рассмотрим различные способы включения JavaScript в react-приложение.

Включение скрипта в index.html

Если вы хотите, чтобы скрипт загружался на каждой странице вашего приложения, вы можете напрямую добавить его в index.html, как показано ниже:

...
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
  async
></script>
...
Вход в полноэкранный режим Выйти из полноэкранного режима

Если вы запустите приложение, проверите и проверите, вы увидите скрипт, добавленный внутри тега head:

Добавление скрипта с помощью useEffect

Если вам нужно добавить скрипт к определенному компоненту и после того, как компонент смонтирован, вы можете разместить его внутри хука useEffect:

import { useEffect } from "react"
import { Helmet } from "react-helmet"

function App() {
  useEffect(() => {
    const script = document.createElement("script")

    script.src =
      "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"

    script.async = true

    script.integrity =
      "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

    script.crossOrigin = "anonymous"

    document.body.appendChild(script)

    return () => {
      // clean up the script when the component in unmounted
      document.body.removeChild(script)
    }
  }, [])

  return <div className="App"></div>
}

export default App
Вход в полноэкранный режим Выйти из полноэкранного режима

Если вы хотите повторно использовать этот сниппет, то можете создать собственный хук, как показано ниже:

import { useEffect } from "react"

const useScript = (url, integrity, async = true, crossOrigin = "anonymous") => {
  useEffect(() => {
    const script = document.createElement("script")

    script.src = url

    script.async = async

    if (integrity) {
      script.integrity = integrity
    }

    script.crossOrigin = crossOrigin

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [url, integrity, async, crossOrigin])
}

export default useScript
Вход в полноэкранный режим Выйти из полноэкранного режима

И использовать его в компоненте App, как показано ниже:

import useScript from "./useScript"

function App() {
  useScript(
    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",
    "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  )
  return <div className="App"></div>
}

export default App
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление скрипта с помощью react-helmet

Существует библиотека react-helmet, которая также может быть использована для добавления скриптов.

Сначала установим ее с помощью следующей команды:

npm i react-helmet
Войти в полноэкранный режим Выйти из полноэкранного режима

Ее можно использовать для включения скрипта (или любого элемента внутри тега head), как показано ниже:

import { Helmet } from "react-helmet"

function App() {
  return (
    <>
      <Helmet>
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
          crossorigin="anonymous"
          async
        ></script>
      </Helmet>
      <div className="App"></div>
    </>
  )
}

export default App
Войти в полноэкранный режим Выйти из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий