Как включить файл javascript в компонент React, который будет выполняться при загрузке страницы?

Я хочу отобразить файл javascript. Я включил некоторый код библиотеки (в частности, leaflet.js) и использую локальный скрипт для запуска после загрузки страницы, чтобы правильно отобразить div id='map'. Однако в моем компоненте реакции я пытаюсь это сделать, и это не работает.

В частности, кажется, что хотя «http://локальный:3000/src/MapRender.js» находится в правильном месте, он не обнаруживается с «Синтаксической ошибкой: неожиданный токен <», который, как я знаю, означает сервер 404. Однако файл находится в той же папке, что и компонент.

Я использую компонент Helmet для загрузки скрипта библиотеки в , однако я хотел бы, чтобы этот скрипт выполнялся после загрузки страницы, чтобы он всегда мог найти правильный div.

Для контекста я создал это приложение с помощью create-react-app и практически ничего не сделал, кроме создания этого компонента Map и добавления компонента Helmet в компонент App.

render() {
    return(
        <div id = "map">
            <script type = "text/javascript" src='MapRender.js'></script>
      </div>
    );
  }

вы можете добавить его в componentdidMount() с помощью тега create script

Shireesha Parampalli 12.02.2019 09:43

Прав ли я, думая, что componentDidMount() не будет вызываться при изменении реквизита, вызывающем повторную визуализацию? Например, если я создам эту карту с помощью javascript на основе местоположения переменной в качестве аргумента, как мне заставить сценарий снова запускаться?

antonig 12.02.2019 22:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
108
0

Другие вопросы по теме