ReactJS: включение скрипта в конкретный компонент - PullRequest
0 голосов
/ 22 февраля 2019

Мне нужно включить библиотеки проверки jquery и формы в определенный компонент.Я уже попробовал react-async-script-loader, но не смог заставить его работать.

Обратите внимание, я использую Laravel и ReactJS.Кроме того, код, который я включил, представляет собой пример кода из репозитория github (https://github.com/leozdgao/react-async-script-loader). Однако у меня есть загруженные файлы для использования в общей папке Laravel.

ЗдесьЯ получаю ошибку:

enter image description here

Uncaught TypeError: Cannot convert undefined or null to object
at Function.getOwnPropertyNames (<anonymous>)
at hoistNonReactStatics (app.js:50805)
at app.js:50617
at Module../resources/js/components/TorrentsAdd.jsx (app.js:81726)
at __webpack_require__ (app.js:20)
at Module../resources/js/Index.js (app.js:81096)
at __webpack_require__ (app.js:20)
at Object../resources/js/app.js (app.js:81203)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:82191)

Вот код:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';
import scriptLoader from 'react-async-script-loader';

/** elements */
import Breadcrumbs from './elements/Breadcrumbs';

export default scriptLoader(
    [
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
    ]
)(SampleForm)

class SampleForm extends Component
{
    constructor()
    {
        super();

        this.state = {
            categories: [],
            years: [],
            status: [],
        };
    }

    componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed })
    {
        if (isScriptLoaded && !this.props.isScriptLoaded) // load finished
        { 
            if (isScriptLoadSucceed)
            {
                this.initEditor()
            }
            else
            {
                this.props.onError()
            }
        }
    }

    componentDidMount()
    {
        const { isScriptLoaded, isScriptLoadSucceed } = this.props;

        if (isScriptLoaded && isScriptLoadSucceed)
        {
            this.initEditor()
        }
    }

    componentWillMount()
    {
        Axios
            .get("/api/categoriesDropdown")
            .then(response => {
                this.setState({
                    categories: response.data.categories,
                    years: response.data.years,
                    status: response.data.status
                });
            });
    }

    render()
    {
        ...
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...