javascript - 如何在 React 项目中集成 Treant.js

Question

我必须在 React.js 项目中使用 Treant.js 库，但我在创建图表时遇到了一些问题。事实上，官方网站告诉我们必须这样导入脚本:

<script src="vendor/raphael.js"></script>
<script src="Treant.min.js"></script>

我认为不可能对这样的导入脚本使用react...我还看到他们制作了一个 Node 模块 ( here )。所以我安装了它并尝试像那样导入库

import Treant from 'treant-js'

此外，我在一个例子中看到他们生成的图表是这样的:

<script>
    new Treant( simple_chart_config );
</script>

最后，导入成功了，但是当我尝试生成那样的图表时

{new Treant (this.state.diagram)}

我有这个错误:_treantJs2.default 不是构造函数

终于看完了这篇文章:Integrating Treant-js in Angular2 Project他们说要从可从网站下载的文件中导入库，但我认为这不可能在 react 中做到这一点......

我已经尝试了很多东西，但我是 react 的初学者，我肯定遗漏了一些明显的东西......如果有人有想法帮助我，那就太好了:)谢谢

编辑

我尝试在我的 React 组件的渲染方法中直接导入脚本:

 render(){
    return(
      <div>
        <script src="../lib/vendor/raphael.js"></script>
        <script src="../lib/Treant.js"></script>
        <script>
            new Treant( {this.state.diagram} );
        </script>
        <p>TEST</p>
      </div>
    )
 }

我认为这是个好方法，但我仍然有这个错误:对象作为 React 子对象无效

Answer 1

我一直在研究几个免费的组织结构图库。我尝试了一些:orgchart(由 dabeng)、d3-mitch-tree 和 Treant.js。我成功地在我的 React 应用程序中使用了前两者，尽管只是用于基本用途。

我只是努力尝试对 Treant.js 做同样的事情。这不是直截了当的。在解决 Treant.js 的问题之前，我必须快速学习 CommonJs。看完它的源代码后，我看到它使用 CommonJs 模块系统，所以它的 javascript 模块必须使用 require 语句包含，而不是 import 声明。你可以在下面看到我的代码。

但是，当运行应用程序时，它显示错误:

"Raphael is not defined"

在调试的时候，找到了错误的原因。 Treant.js 文件依赖于 raphael 库，该库在其 handleOverflow 函数中使用。所以我在 Treant.js 文件的那个函数中添加了一行来包含如下依赖项:

// Create Raphael instance, set scrollbars if necessary
handleOverflow: function(treeWidth, treeHeight) {
    // I added this statement which didn't exist in original file
    var Raphael = require("./vendor/raphael")
    // ...

这是我的代码:

import React from "react";
import "treant-js/Treant.css"
import "treant-js/basic-example.css"

var Treant = require("treant-js/Treant")

export default class MyTreantJs extends React.Component {
constructor(props) {
    super(props);
    this.treant = null
    this.chart_config = null
}

componentDidMount() {
    const loginpathname = window.sessionStorage.getItem("appHomePathName", homepathname)
    const index = loginpathname.indexOf("public")
    const homepathname = loginpathname.substring(0,index)
    const imageurl = homepathname + "/public/images/headshots/"

    const config = {
        container: "#basic-example",            
        connectors: {
            type: 'step'
        },
        node: {
            HTMLclass: 'nodeExample1'
        }
    },
    ceo = {
        text: {
            name: "Mark Hill",
            title: "Chief executive officer",
            contact: "Tel: 01 213 123 134",
        },
        image: imageurl + "2.jpg"
    },

    cto = {
        parent: ceo,
        text:{
            name: "Joe Linux",
            title: "Chief Technology Officer",
        },
        stackChildren: true,
        image: imageurl + "1.jpg"
    },
    cbo = {
        parent: ceo,
        stackChildren: true,
        text:{
            name: "Linda May",
            title: "Chief Business Officer",
        },
        image: imageurl + "5.jpg"
    },
    cdo = {
        parent: ceo,
        text:{
            name: "John Green",
            title: "Chief accounting officer",
            contact: "Tel: 01 213 123 134",
        },
        image: imageurl + "6.jpg"
    },
    cio = {
        parent: cto,
        text:{
            name: "Ron Blomquist",
            title: "Chief Information Security Officer"
        },
        image: imageurl + "8.jpg"
    },
    ciso = {
        parent: cto,
        text:{
            name: "Michael Rubin",
            title: "Chief Innovation Officer",
            contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"}
        },
        image: imageurl + "9.jpg"
    },
    cio2 = {
        parent: cdo,
        text:{
            name: "Erica Reel",
            title: "Chief Customer Officer"
        },
        link: {
            href: "http://www.google.com"
        },
        image: imageurl + "10.jpg"
    },
    ciso2 = {
        parent: cbo,
        text:{
            name: "Alice Lopez",
            title: "Chief Communications Officer"
        },
        image: imageurl + "7.jpg"
    },
    ciso3 = {
        parent: cbo,
        text:{
            name: "Mary Johnson",
            title: "Chief Brand Officer"
        },
        image: imageurl + "4.jpg"
    },
    ciso4 = {
        parent: cbo,
        text:{
            name: "Kirk Douglas",
            title: "Chief Business Development Officer"
        },
        image: imageurl + "11.jpg"
    }

    this.chart_config = [
        config,
        ceo,
        cto,
        cbo,
        cdo,
        cio,
        ciso,
        cio2,
        ciso2,
        ciso3,
        ciso4
    ];

    this.treant = new Treant(this.chart_config)
}

render(){
  return (
    <div id="basic-example" style={{height:"600px", width:"1200px"}}></div>
  );
}

这里，basic-example.css 文件是从示例文件夹中复制的。图表的配置也取自示例文件夹。我使用浏览器的 sessionStorage 来查找图像的位置。到目前为止，我的代码运行良好。

编辑:上面的代码仍然不起作用。 请勿修改 Treant.js 源代码。相反，请使用以下内容:

import React from "react";
import "treant-js/Treant.css"
import "treant-js/examples/basic-example/basic-example.css"
import Raphael from "raphael";

window.Raphael = Raphael

var Treant = require("treant-js/Treant")
Treant = Treant.Treant

Treant 不导入 raphael，但它希望 raphael 实例在全局范围内可用。这就是为什么在我们的应用程序中导入 raphael 之后我们需要声明:

window.Raphael = Raphael

注意语句:

Treant = Treant.Treant

这是必要的，因为 Treant(在查看控制台时)是一个具有也名为 Treant 的属性的对象。