在反应中没有定义“可视化”

Question

我试图将Visualize.js图表​​嵌入我的React应用程序中，并且出现此错误：“'Visualize'未在react中定义为no-undef”

我也在index.html中导入了visualize.js。 以下代码中指向visualize.js的链接不正确，因为出于保密目的，我将其替换。

如何从服务器导入库并运行“可视化”功能？ 谢谢！

import React, { Component } from 'react';
import queryString from 'query-string';  
import {
    api,
    defaultProductQuery,
    Category,
    SortBy
} from './api.js';
import { Page } from './Page.js';

const Option = Select.Option;

export class TopProductsDashBoard extends Component {        
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            product: null,
            loading: true
        };
    }

    componentDidMount() {
        visualize({
            auth: {
                name: "name",
                password: "password"
            }
        }, function(v) {
            //render report from provided resource
            v("#container").report({
                resource: "public/report",
                error: handleError
            });

            //show error
            function handleError(err) {
                alert(err.message);
            }
        });
    }

    onNavigateBack = () => {
        if (this.props.location.state) {
            this.props.history.goBack();
        } else {
            this.props.history.push('/');
        }
    };

    render() {
        return (
            <div>
                <script type='text/javascript' src="http://example.com/jasperserver-pro/client/visualize.js"></script> 
                <div id="container"></div>
            </div>
        );
    }
}

Answer 1

我做的方式：

"use strict";

var React = require("react")

var AnalythicsDashboardView = React.createClass({

    componentDidMount: function () {
        const visualize = window.visualize;
        visualize({
            auth: {
                name: "some_name",
                password: "some_pass",
                organization: "some_org"
            }
        }, function (v) {
            v("#container").dashboard({
                resource: "/public/Workshop/Profit_Dashboard",
                error: handleError
            });

            // show error
            function handleError (err) {
                alert(err.message);
            }
        });
    },

    render: function () {
        return (
            <div id="container" style={{ width: "100%", height: "1000px" }}>
                <div id="dashboard">
                    <div><p>Loading...</p></div>
                </div>
            </div>
        );
    }
});

module.exports = AnalythicsDashboardView;

并在我的index.html中添加以下行：

<script type="text/javascript" src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>

Answer 2

const visualize = window.visualize;