Как импортировать скрипт для моего проекта? РеактJS

avatar
Jota
8 апреля 2018 в 03:24
4020
3
0

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

Я создал архив HTML со скриптами:

<html>
    <head>
        <script> //1.www.s81c.com/common/v18/css/www.css</script>
        <script> //1.www.s81c.com/common/stats/ida_stats.js</script>
        <script> //1.www.s81c.com/common/v18/js/www.js</script>
    </head>
</html>

и импортировано в мой App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
        </header>
          To get started, edit <code>src/App.js</code> and save to reload.
      </div>
    );
  }
}

export default App;

но с учетом этой ошибки:

> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
|     <head>
|         <script> //1.www.s81c.com/common/v18/css/www.css</script>

Резюме: Я хочу импортировать сценарии для использования в моем App.js

Источник

Ответы (3)

avatar
Lucas Kellner
8 апреля 2018 в 04:09
1

Я думаю, что тег для файла .css должен быть <link>.

Существует несколько способов импорта внешних сценариев. Один из работающих способов — переместить эти сценарии в <head> вашего public/index.html. 

/// public/index.html ///
<html>
  <head>
    <script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
    <link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
    <script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///

Эти сценарии будут загружены при загрузке вашей страницы, и вы сможете получить доступ к переменным в этих сценариях в объекте window. После привязки к ним из вашего public/index.html перезапустите приложение React, затем откройте консоль с помощью F12 или Command-Option-i и введите в консоль window. Там вы увидите все глобальные функции, доступные в вашем приложении React, включая window.IBMCore, window.Modernizr и т. д.

.
Jota
8 апреля 2018 в 14:37
0

СПАСИБО, БРАТ, Я ТЕБЯ ЛЮБЛЮ <3

Lucas Kellner
9 апреля 2018 в 21:31
0

Это решило вашу проблему? Если бы это было так, то принятие этого ответа сделало бы мой день :)

avatar
Revansiddh
8 апреля 2018 в 07:37
0

импортируйте те, что в index.html, путь public.index.html. Поскольку ваше приложение помещается в один из div той же HTML-страницы. 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Прочитайте, как работает веб-пакет.

https://webpack.js.org/configuration/externals/

иначе можно сохранить файл и импортировать в App.js

import './App.scss';
avatar
iceveda06
8 апреля 2018 в 03:38
0

Вы пробовали это?

<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>

и для следующего можете попробовать обычный <link /> вместо <script>

Jota
8 апреля 2018 в 03:47
0

Спасибо за ответ, но проблема продолжается.. :(

iceveda06
8 апреля 2018 в 03:49
0

это та же ошибка? Можете ли вы показать мне, что вы написали для скриптов и тегов ссылок?