Блог

Главная - Вопросы по программированию - загрузка скрипта в компоненты react, которые находятся в той же папке

загрузка скрипта в компоненты react, которые находятся в той же папке

#reactjs

Вопрос:

Это может быть простой вопрос, но я не мог понять, как загрузить внешний скрипт, который находится в той же папке, используя относительный путь. Ниже приведен снимок папки src.

введите описание изображения здесь

Здесь я пытаюсь импортировать draggable.js внутри DesignScreen.js компоненты. Здесь определены компоненты.

 import React from 'react'
import './decorate.css'

const DesignsScreen = () => {
  React.useEffect(() => {
    const LoadExternalScript = () => {
      const externalScript = document.createElement('script')
      // externalScript.onerror = loadError;
      externalScript.id = 'external'
      externalScript.async = true
      externalScript.type = 'text/javascript'
      externalScript.setAttribute('crossorigin', 'anonymous')
      document.body.appendChild(externalScript)
      externalScript.src = './draggable.js'
    }
    LoadExternalScript()
  }, [])
  return (
    <>
      <div
        id='draggable'
        draggable='true'
        style={{ backgroundPosition: '0px 0px' }}
      ></div>
    </>
  )
}

export default DesignsScreen

Я хочу загрузить draggable.js без использования полного пути, как это: ExternalScript.src = ‘./draggable.js». Я безрезультатно поискал решение в Интернете. Итак, я пришел сюда в поисках ответа.

Ответ №1:

Если вы создадите свой проект с CRA помощью , вы можете просто добавить свой внешний скрипт public/index.html .

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <-- Add your script here -->
    <title>React App</title>
  </head>

Комментарии:

1. Причина LoadExternalScript = () внутри крючков useEffect заключается в том, что если я импортирую draggable.js в index.html затем документ. querySelector(‘#перетаскиваемый’) возвращает значение null.

Ответ №2:

ExternalScript.src = ‘/src/screens/draggable.js » как только вы попробуете это в нашем проекте, мы импортируем файлы сценариев, подобные этому.

Комментарии:

1. это не сработало таким образом. Я проверяю элемент загруженного скрипта <идентификатор скрипта=»внешний» асинхронный=»» тип=»текст/javascript» crossorigin=»анонимный» src=»/src/screens/ProductBase/draggable.js»><идентификатор сценария=»внешний» асинхронный=»» тип=»текст/javascript» кроссоригин=»анонимный» src=»/src/screens/ProductBase/draggable.js»></скрипт>. Он пуст.

Ответ №3:

Помните, что если вы работаете с внешними сценариями, то ./ в вашем ExternalScript.src является общедоступным каталогом. После создания приложения React больше не будет папки src, только общая папка.

src/screens/ProductBase/DesignsScreen.js файл:

 let externalScript = document.createElement('script');
externalScript.src = './draggable.js';
externalScript.async = true;
document.body.appendChild(externalScript);

public/draggable.js файл:

 window.addEventListener('load', () => console.log("Hello World!"));

Я протестировал этот пример кода, и он работает. Когда браузер загружает страницу, консоль регистрирует «Привет, мир!».

Метки: ,