Question

我正在尝试在我的反应应用程序中嵌入Visualize.js图表，我收到了这个错误：＆＃34;＆＃39; visualize＆＃39;没有定义no-undef in react＆＃34;

我也在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

我的操作方式：

undefined

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

"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;

Answer 2

const visualize = window.visualize;

＆＃39;可视化＆＃39;没有定义no-undef in react

2 个答案: