Получение примера mxGraph Hello World, работающего в React - PullRequest
Новая
       21

Получение примера mxGraph Hello World, работающего в React

0 голосов
/ 24 января 2020

Я новичок в mxGraph и React и хотел бы получить пример mxGraph hello world , работающий в React, просто чтобы получить базовое c понимание того, как я могу работать с mxGraph (и другими сторонние библиотеки).

Я запустил новый проект React, используя create-Reaction-app с шаблоном машинописного текста, и установил mxGraph с yarn add mxgraph.

Я не нашел ни одного официального машинописный ввод, поэтому я не совсем уверен, как мне импортировать библиотеку, чтобы иметь возможность начать ее использовать.

Попытка импортировать ее следующим образом 

import * as mxGraph from "mxgraph";

дает мне

Не удалось найти файл объявления для модуля 'mxgraph'.

Также пробовал 

const mxGraph = require("mxgraph");

, но это тоже не работает ...

Так что я немного озадачен и не знаю, с чего начать.

Может ли кто-нибудь помочь мне добиться успеха?

Спасибо!

1 Ответ

0 голосов
/ 24 января 2020

Вот так у меня все получилось. Не уверен, что это полностью правильно, но я думаю, это начало. 

import React, { useEffect, useRef } from "react";
import { mxGraph, mxRubberband, mxClient, mxUtils, mxEvent } from "mxgraph-js";

const App: React.FC = () => {
  const divGraph = useRef(null);

  useEffect(() => {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      mxEvent.disableContextMenu(divGraph.current);
      const graph = new mxGraph(divGraph.current);
      new mxRubberband(graph);
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      try {
        const v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30);
        const v2 = graph.insertVertex(parent, null, "World!", 200, 150, 80, 30);
        const e1 = graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  });

  return <div className="graph-container" ref={divGraph} id="divGraph" />;
};

export default App;
...