Как включить сторонние js-библиотеки в приложение React

Я новичок в React и ищу React-эквивалент этого подхода JQuery для включения аналитики в мое приложение.

Обычно я бы:

  1. Включите стороннюю библиотеку на html-страницы. Достаточно легко разместить страницу index.html, но я не знаю, является ли это лучшей практикой.

    <script src="http://path/to/script/utag.js" />

  2. Затем я могу взаимодействовать с библиотекой, пока она загружена, что я могу проверить с помощью JQuery window.load. Этот скрипт будет нормально работать на простой html-странице, но я пытаюсь найти эквивалентный лучший способ сделать это в своем приложении для реагирования. Я не хочу вводить jquery, и в настоящее время мой контейнер React сообщит мне, что utag не определен, если я попытаюсь сослаться на utag в функции.

    <script> $(window).load(function() { utag.link({ "event_name" : "locale_select", "language" : utag_data.language, "currency" : utag_data.currency } ); }); </script>

Я новичок в React, поэтому любая помощь будет отличной. Я знаю, что мой проект не использует веб-пакет, он использует сценарии реагирования и был запущен с помощью утилиты create-react-app.


reactjs create-react-app javascript
person user1521567    schedule 30.08.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Согласно этой проблеме на GitHub, если вы используете create-react- app, если вы хотите использовать глобальные переменные, импортированные или созданные в вашем файле index.html, в вашем сценарии реагирования, вы должны использовать window.variable_name.

В вашем случае это, вероятно, сработает

import React from "react"
class App extends React.Component {
    componentDidMount() {
        window.utag.link({ "event_name" : "locale_select", "language" : 
    window.utag_data.language, "currency" : window.utag_data.currency } );
    }

    render() {
        return <div />;
    }
}
person Mohammad Mahmoudi    schedule 24.04.2018

arrow_upward
2
arrow_downward 

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}

Важно понимать утверждение внутри Компонента, предложенное выше. componentDidMount() — это метод жизненного цикла, который вызывается автоматически после отображения компонента на экране. Затем внутри него вы вызываете свой someLibrary(). В зависимости от типа сторонней библиотеки, о которой вы говорите, будет зависеть, что вам может понадобиться также для передачи в someLibrary().

Именно так Reactjs взаимодействует со сторонними библиотеками, потому что обычно сторонние библиотеки не знают, как быть в экосистеме React. Они понятия не имеют, что такое метод render() или что такое JSX. Так что это общий способ заставить сторонние библиотеки хорошо работать с React.

person Daniel    schedule 26.09.2017

arrow_upward
1
arrow_downward

Если вы используете create-react-app, то webpack используется для связывания вашего javascript. Вот документация по установке зависимостей с помощью create-react-app.

Чтобы включить вашу библиотеку, вы должны установить ее как пакет npm и импортировать в файл, где вы хотите ее использовать. Webpack включит его в комплект, и все должно работать.

Итак, установите библиотеку с помощью npm install some-library. Импортируйте его в файл и вызовите из компонента:

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}
person elas    schedule 30.08.2017
comment
Поэтому скрипт, который я хочу включить, недоступен в виде пакета npm. Также его необходимо обслуживать из CDN. Можно ли включить его на страницу индекса и ссылаться на него в компонентах? - person user1521567; 30.08.2017