2

我的目标是将以下代码引入到我现有的下面的 React Web 应用程序中。 https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js:0-3896

我首先通过创建一个包含以下代码的简单反应应用程序来说明它运行良好：

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Group, Line, Rect } from "react-konva";

class RoiComponent extends Component {
  state = {
    points: [],
    curMousePos: [0, 0],
    isMouseOverStartPoint: false,
    isFinished: false
  };

  componentDidMount() {
    console.log(window.innerHeight);
  }

  render() {

    // [ [a, b], [c, d], ... ] to [ a, b, c, d, ...]
    const flattenedPoints = points
        .concat(isFinished ? [] : curMousePos)
        .reduce((a, b) => a.concat(b), []);
    return (
        <Stage
            width={window.innerWidth}
            height={window.innerHeight}
            onMouseDown={handleClick}
            onMouseMove={handleMouseMove}
        >
          <Layer>
            <Line
                points={flattenedPoints}
                stroke="black"
                strokeWidth={5}
                closed={isFinished}
            />
            {points.map((point, index) => {
              const width = 6;
              const x = point[0] - width / 2;
              const y = point[1] - width / 2;
              const startPointAttr =
                  index === 0
                      ? {
                        hitStrokeWidth: 12,
                        onMouseOver: handleMouseOverStartPoint,
                        onMouseOut: handleMouseOutStartPoint
                      }
                      : null;
              return (
                  <Rect/>
              );
            })}
          </Layer>
        </Stage>
    );
  }
}

export default RoiComponent;

然后我想将上面的代码包含到我现有的 react web 应用程序中。于是我把上面的代码做成了一个组件，开始调用如下图（即它的<RoiComponent/>）

import React, {Component} from 'react';
import { Page, Grid } from 'tabler-react';
import RoiComponent from "./components/RoiComponent"
class RoiPage extends Component {
  render() {
    return (
        <RoiComponent/>
    )
  }
}

export default RoiPage;

完成此操作后，当我构建应用程序时，我不断收到此错误

Error: 'Stage' is not exported by node_modules/react-konva/lib/ReactKonva.js

我的 package.json 如下

{
  "name": "smt",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.12.0",
    "react-dom": "^15.0.0 || ^16.12.0"
  },
  "dependencies": {
    "js-file-download": "^0.4.8",
    "konva": "^7.2.0",
    "moment": "^2.24.0",
    "react-image-lightbox": "^5.1.1",
    "react-konva": "^17.0.0-0",
    "react-router-dom": "^5.1.2",
  }
}

这不起作用的任何原因？

4

0 回答 0