Question

我想第一次使用CanvasJs React，并按照此link上的指南进行操作。

链接显示三个步骤：

创建一个React应用
在您的应用中保存CanvasJS React文件（从link下载）
导入CanvasJS React组件

我已经完成了上面的三个步骤，但是在完成最后的步骤后，我在网页上收到了此错误：

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Module.<anonymous>
src/assets/js/canvasjs.react.js:42
  39 |  }   
  40 | }
  41 | 
> 42 | module.exports = {
  43 |     CanvasJSChart: CanvasJSChart,
  44 |     CanvasJS: CanvasJS
  45 | };

canvasjs.react.js：

var React = require('react');
var CanvasJS = require('./canvasjs.min');

class CanvasJSChart extends React.Component {
    static _cjsContainerId = 0
    constructor(props) {        
        super(props);       
        this.options = props.options ? props.options : {};      
        this.containerProps = props.containerProps ? props.containerProps : {width: "100%", position: "relative"};
        this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px";
        this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
    }   
    componentDidMount() {
        //Create Chart and Render
        this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);
        this.chart.render();

        if(this.props.onRef)
            this.props.onRef(this.chart);
    }   
    shouldComponentUpdate(nextProps, nextState){
        //Check if Chart-options has changed and determine if component has to be updated
        return !(nextProps.options === this.options);
    }
    componentDidUpdate() {
        //Update Chart Options & Render
        this.chart.options = this.props.options;
        this.chart.render();
    }
    componentWillUnmount() {
        //Destroy chart and remove reference
        this.chart.destroy();
        if(this.props.onRef)
            this.props.onRef(undefined);
    }       
    render() {      
        //return React.createElement('div', { id: this.chartContainerId, style: this.containerProps });     
        return <div id = {this.chartContainerId} style = {this.containerProps}/>        
    }   
}

module.exports = {
    CanvasJSChart: CanvasJSChart,
    CanvasJS: CanvasJS
};

App.js：

import React, { Component } from 'react';
var CanvasJSReact = require('./assets/js/canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {
    render() {
        const options = {
            title: {
                text: 'Basic Column Chart in React',
            },
            data: [
                {
                    type: 'column',
                    dataPoints: [
                        { label: 'Apple', y: 10 },
                        { label: 'Orange', y: 15 },
                        { label: 'Banana', y: 25 },
                        { label: 'Mango', y: 30 },
                        { label: 'Grape', y: 28 },
                    ],
                },
            ],
        };

        return (
            <div>
                <CanvasJSChart
                    options={options}
                    /* onRef = {ref => this.chart = ref} */
                />
            </div>
        );
    }
}

export default App;

我将create-react-app v1.5.2用于：

react: 16.6.3,
react-dom: 16.6.3,
react-scripts: 2.1.1

nodejs: v8.13.0
npx: v6.4.1

有谁遇到过像我这样的问题？

Answer 1

我遇到了同样的问题，通过将canvasjs.react.js的结束语法切换为：

export {CanvasJSChart, CanvasJS};

在App.js中，导入画布：

import CanvasJSReact from './canvasjs.react';
import { CanvasJS } from './canvasjs.react';
import { CanvasJSChart} from './canvasjs.react';

而不是使用require。希望有帮助！

Answer 2

该问题似乎是由于v2.2.0-rc.5中引入的Webpack的重大更改所致。这是您共享的Updated Code中的Link 2（Sample Project）。

Answer 3

根据Webpack，您不能混合使用import和module.exports。尝试仅使用require()语句。

CanvasJs React-无法分配为仅读取对象的属性“导出”

3 个答案: