Возможно, вы сталкивались с ситуациями, когда вам нужно включить сторонний 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