Javascript ReactJS中的基石工具-不在第一个加载位上工作之后工作

我正在尝试加载最新的ReactJS，但无法使其工作。我可以加载cornerstoneJS，然后显示图像，但不会激活。我见过使用旧版本的cornerstonejs react的例子，但一旦更新，它们也会停止工作

这是我的密码：

index.js

import React from "react";
import { render } from "react-dom";
import CornerstoneElement from "./cornerstoneElement";

const App = () => (
  <div>
    <h2>Cornerstone React Component Example</h2>
    <CornerstoneElement imageId="https://www.fnordware.com/superpng/pnggrad16rgb.png" />
  </div>
);

render(<App />, document.getElementById("root"));

import React from "react";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import { withStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";

const defaultTools = {
  Pan: 2,
  ZoomMouseWheel: 0,
  Wwwc: 1
};

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneWebImageLoader.external.cornerstone = cornerstone;

const styles = theme => ({
  root: {
    width: "100%",
    height: "100%",
    color: "black",
    position: "relative"
  },
  bottomLeftStyle: {
    bottom: "0.5rem",
    left: "0.5rem",
    position: "absolute",
    color: "white"
  },
  bottomRightStyle: {
    bottom: "0.5rem",
    right: "0.5rem",
    position: "absolute",
    color: "white"
  }
});

class CornerstoneElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: cornerstone.getDefaultViewport(null, undefined)
    };
    this.toolBox = {};

    this.onImageRendered = this.onImageRendered.bind(this);
    this.onNewImage = this.onNewImage.bind(this);
    this.onWindowResize = this.onWindowResize.bind(this);
  }

  render() {
    const { classes } = this.props;
    return (
      <div
        className={[classes.root, "viewportElement"].join(" ")}
        ref={input => {
          this.element = input;
        }}
      >
        <canvas className="cornerstone-canvas" />
        <div className={classes.bottomLeftStyle}>
          Zoom: {this.state.viewport.scale}
        </div>
        <div className={classes.bottomRightStyle}>
          WW/WC: {this.state.viewport.voi.windowWidth} /{" "}
          {this.state.viewport.voi.windowCenter}
        </div>
      </div>
    );
  }

  onWindowResize() {
    cornerstone.resize(this.element);
  }

  onImageRendered() {
    const viewport = cornerstone.getViewport(this.element);

    this.setState({
      viewport
    });
  }

  onNewImage() {
    const enabledElement = cornerstone.getEnabledElement(this.element);

    this.setState({
      imageId: enabledElement.image.imageId
    });
  }

  componentDidMount() {
    const element = this.element;
    this.loadDefaultCanvas(element);

    this.element.addEventListener(
      "cornerstoneimagerendered",
      this.onImageRendered
    );
    this.element.addEventListener("cornerstonenewimage", this.onNewImage);

    window.addEventListener("resize", this.onWindowResize);
  }

  componentWillUnmount() {
    const element = this.element;
    element.removeEventListener(
      "cornerstoneimagerendered",
      this.onImageRendered
    );

    element.removeEventListener("cornerstonenewimage", this.onNewImage);

    window.removeEventListener("resize", this.onWindowResize);

    cornerstone.disable(element);
  }

  loadDefaultCanvas(element) {
    //enable element
    cornerstone.enable(element);
    this.loadImageToGivenPath().then(() => {
      cornerstoneTools.init();
      console.log(cornerstoneTools);
      this.loadDefaultTools(element);
    });
  }

  async loadImageToGivenPath() {
    let image = await cornerstone.loadAndCacheImage(this.props.imageId);
    return cornerstone.displayImage(this.element, image);
  }

  loadDefaultTools(element) {
    for (const defaultTool of Object.keys(defaultTools)) {
      this.loadCsTool(
        String(defaultTool),
        defaultTools[defaultTool],
        true,
        element
      );
    }
  }

  loadCsTool(toolName, toolMouseMask = 0, activate = false, element) {
    const tool = cornerstoneTools[toolName + "Tool"];
    cornerstoneTools.addToolForElement(element, tool);
    //keep toolbox status
    this.toolBox[toolName + "Tool"] = {
      isEnabled: false
    };
    if (activate) {
      this.activateCsTool(toolName, toolMouseMask, element);
    }
  }

  activateCsTool(toolName, toolMouseMask = 0, element) {
    cornerstoneTools.setToolActiveForElement(element, toolName, {
      mouseButtonMask: toolMouseMask
    });

    this.toolBox[toolName + "Tool"].isEnabled = true;
  }
}

CornerstoneElement.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CornerstoneElement);

从“React”导入React；
从“react dom”导入{render}；
从“/CornerstoneElement”导入CornerstoneElement；
常量应用=（）=>(
一个组件示例
);
render（，在某个点中断代码并立即修复后，它可以正常工作。但是，它不能在页面加载时工作，这是预期的结果

图像链接作为道具传递给Cornerstone元素。任何帮助都将不胜感激

更新：fiddle现在可以处理外部图像，问题仍然存在。控制台中没有错误或警告。
自从您提出问题以来，Cornerstonejs核心团队发布了一个在React组件中包装Corneronous和Corneronouse Tools版本4的实用示例：

在React组件和方法声明中，您的代码似乎有很多与此相关的问题。这并不能解决您的问题，但我想指出的是。将所有方法转换为arrow函数并删除所有绑定谢谢，我确实理解此问题，这是我从示例I l复制的代码墨迹斑斑，一本正经，只是不想改变它来理解这个问题。我已经弄明白了，我很快会添加一个答案。再次感谢：）