Теги скрипта в React js запускаются в неправильном порядке - PullRequest
Новая
       6

Теги скрипта в React js запускаются в неправильном порядке

0 голосов
/ 29 апреля 2020

Я пытаюсь добавить некоторые теги сценария в тег body из компонента App (и в любом месте кода). Я создаю функцию, подобную этой: 

const addScriptTag = options => {
  for (let option of options) {
    const script = document.createElement('script')

    script.src = option.src
    script.type = option.type || 'text/javascript'
    script.async = true
    script.defer = true

    document.body
      .appendChild(script)
  }
}

И передаю массив следующим образом: 

const scriptTags = [
  { src: '/bootstrap/js/jquery.min.js' },
  { src: '/bootstrap/js/bootstrap.min.js' },
  { src: '/bootstrap/js/popper.min.js' },
  { src: '/bootstrap/js/mdb.min.js' },
  { src: '/js/ramda.min.js' },
  { src: '/js/navbar.js' },
  { src: '/js/chat.js' },
]

Он запускается и правильно создает теги сценариев в порядке в HTML: 

<script src="/bootstrap/js/jquery.min.js" type="text/javascript" async defer></script>
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript" async defer></script>
<script src="/bootstrap/js/popper.min.js" type="text/javascript" async defer></script>
<script src="/bootstrap/js/mdb.min.js" type="text/javascript" async defer></script>
...

Но мои проблемы в том, что теги скрипта не работают правильно в ордерах. Это то, что консоль сказала: 

navbar.js:19 Uncaught ReferenceError: $ is not defined
    at navbar.js:19
(anonymous) @ navbar.js:19
chat.js:14 Uncaught ReferenceError: $ is not defined
    at chat.js:14
(anonymous) @ chat.js:14
bootstrap.min.js:6 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (bootstrap.min.js:6)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6

и мой полный код: 

import React, { useEffect } from 'react'
import Dashboard from './components/Dashboard/Body.DB'
import './App.css'

// Bootstrap css
import './components/bootstrap/css/bootstrap.min.css'
import './components/bootstrap/css/mdb.min.css'

const addScriptTag = options => {
  for (let option of options) {
    const script = document.createElement('script')

    script.src = option.src
    script.type = option.type || 'text/javascript'
    script.async = true
    script.defer = true

    document.body
      .appendChild(script)
  }
}


const scriptTags = [
  { src: '/bootstrap/js/jquery.min.js' },
  { src: '/bootstrap/js/bootstrap.min.js' },
  { src: '/bootstrap/js/popper.min.js' },
  { src: '/bootstrap/js/mdb.min.js' },
  { src: '/js/ramda.min.js' },
  { src: '/js/navbar.js' },
  { src: '/js/chat.js' },
]
const App = props => {
  useEffect(() => {
    addScriptTag(scriptTags)
  }, [])

  return (
    <div className="App">
      <Dashboard />
    </div>
  );
}

export default App

Мой вопрос заключается в том, как заставить теги сценариев работать точно так же, как я их размещаю в HTML тег тела? спасибо!

...