“‘visualize”未在react中定义no-undef

Question

我正在尝试将Visualize.js图表嵌入到react应用程序中，但我得到了这个错误："'visualize‘is not defined no-undef in react“

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

如何从我的服务器导入库并运行'visualize‘函数？谢谢!

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;