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

Question

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

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

我认为不可能对这样的导入脚本做出反应... 我还看到他们制作了一个节点模块（here）。 所以我安装了它并尝试像那样导入库

import Treant from 'treant-js'

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

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

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

{new Treant (this.state.diagram)}

我有这个错误：_treantJs2.default is not a constructor

最后我读到了这篇文章：Integrating Treant-js in Angular2 Project，他们说要从网站上可下载的文件中导入 lib，但我认为反应中不可能这样做......

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

编辑

我尝试在我的 react 组件的 render 方法中直接导入脚本：

 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>
    )
 }

我认为这是个好方法，但我仍然有这个错误： Objects are not valid as a React child

Answer 1

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

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

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

“未定义拉斐尔”

在调试的时候，我找到了错误的原因。 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。

Answer 2

我不确定这是否违反了任何规则 - 作为评论可能会更好，我真的不知道，但不幸的是，由于缺乏声誉，我无法发表评论，但我真的很想发表评论更新以防其他人发生这种情况。 Lex Soft 上面的答案几乎让我找到了解决方案，但我不得不使用库 treantjs (https://www.npmjs.com/package/treantjs) 而不是 treant-js。

基本上我的导入看起来像这样：

import 'treantjs/Treant.css';
import Raphael from 'raphael';
import React from 'react';
import Treant from 'treantjs/Treant';

Treant = window.Treant; // this package doesn't load as a module properly...
window.Raphael = Raphael;

treant-js 库有点旧，不是官方包，所以不是最新的。当我卸载节点并安装新节点时，我特别遇到了图表仅显示第一个节点的问题。