无法在 reactjs 中使用 draw2d - 无法读取未定义的属性“x”

Question

As a noob to draw2d I don't know if I've forgotten to import/initialise something

When I click on my add button I get this error...

VM50:7142 Uncaught TypeError: Cannot read property 'x' of undefined
  at Function.R._engine.create (eval at module.exports (draw2d.js:4043), <anonymous>:7142:21)
  at R (eval at module.exports (draw2d.js:4043), <anonymous>:484:47)
  at Class.init (draw2d.js:8199)
  at new Class (eval at module.exports (draw2d.js:4043), <anonymous>:92:19)
  at AppTest.addClick (AppTest.js:13)

Here's my react class...

import React, {Component} from "react";
import jquery from "jquery";
import "import-jquery";
import "jquery-ui-bundle"; 
import "jquery-ui-bundle/jquery-ui.css";
import draw2d from "draw2d";

window.$ = window.jQuery = jquery;

export default class AppTest extends Component {

    addClick() {
        var canvas = new draw2d.Canvas("draw2dHolder");
    }

    render() {
        return (
<div>
    <div>
        <button className="button" onClick={() => this.addClick()}>Add</button>
    </div>
    <div>
        name: <input></input> state: <input></input>
    </div>
    <div ref="draw2dHolder" className="canvas">
    </div>
</div>
        );
    }
}

Answer 1

Make sure there's an element with id "draw2dHolder" in on your page.