Как использовать select2, slick, barrating в приложении предварительной настройки php artisan? - PullRequest
Новая
       12

Как использовать select2, slick, barrating в приложении предварительной настройки php artisan?

0 голосов
/ 15 октября 2018

Я пытаюсь интегрировать react приложение переднего плана в laravel, используя "php artisan preset реагировать".

При использовании библиотеки select2 возникла некоторая проблема.

Обычно в приложении create-react-app я могу просто связать и написать сценарий select2 cdns в public/index.html файле внутри тега head.

Затем использовать jquery иselect2 как в файле src/components/*.js: 

import React, { Component } from 'react';

// REACT ROUTER
import { Route, Link } from "react-router-dom";

// IMPORT HEADERBODY'S COMPONENTS

class HeaderBody extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Provinces: [],
        };
        this.select2PX = this.select2PX.bind(this);
    }

    
    select2PX(){
        window.$(document).ready(function() {
            window.$('#phuong-xa').select2();
        });
    }


    componentDidMount(){
        this.select2PX();
        
    }

    render() {
         //html in here
        );
    }
}
export default HeaderBody;

, но когда я делаю это внутри предустановки php artisan, она, похоже, не работает.Чтобы быть более конкретным, я сделал это так.

resoures / views / App.blade.php: 

<!DOCTYPE html>
    <html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Netdi Laravel-React</title>

        <!-- Sources -->
        <script src="./js/popper.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- CAROUSEL -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

        <!-- BAR RATING -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-reversed.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/jquery.barrating.min.js"></script>


        <!-- GOOGLE MAP -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <!-- SELECT2 -->

        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
      

        <!-- CSS -->
        <link rel="stylesheet" href="./css/normalize.min.css" />
        <link rel="stylesheet" href="./css/bootstrap.min.css" />
        <link rel="stylesheet" href="./css/common.css" />
        <link rel="stylesheet" href="./css/home-page.css" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


    </head>
    <body>
        <div id="app"></div>
        <div id="footer"></div>
        <!-- <div id="MapModal"></div>
        <div id="LoginModal"></div> -->

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

затем внутри resoures / assets / js / React / index.js: 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import App from './App';//App.js is similar as above.
import Footer from './Components/Footer';

ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<Footer />, document.getElementById('footer'));

Затем я запускаю 

npm run dev
php artisan serve

, он ничего не рендерит и регистрирует эту ошибку в консоли: 

Uncaught TypeError: window.$(...).select2 is not a function
    at HTMLDocument.<anonymous> (app.js:61646)
    at mightThrow (app.js:7551)
    at process (app.js:7619)

Кажется, что jQuery работает отлично.Единственное, что вызывает эту проблему - select2(), такая же проблема возникла и с slick и barrating.

Что здесь не так, и как я могу это исправить?

...