Reactjs 如何将OrgChart插件与React JS集成/使用

我正在寻找一个react插件，它根据我在react应用程序中传递给它的JSON数据显示组织结构图。我需要一些基本的功能，比如如果用户在组织结构图中点击某个员工，那么我就可以得到该员工的全部档案信息。我已经搜索了它，并提出了“OrgChart”插件，但现在我不知道如何将此插件与react.js结合使用，因为我是react.js的初学者，所以不知道如何集成。因此，如果您能为我提供代码，我会很有帮助

我已经看到了链接，但由于知识不足，我无法理解在react.js中将下面的代码和适当的文件层次放在何处

class OrgChart extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    let datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    this.$el.orgchart({
      'data' : datascource,
      'nodeContent': 'title',
      'pan': true,
      'zoom': true
    });
  }

  componentWillUnmount() {
    this.$el.empty();
  }

  render() {
    return (
      <div id="chart-container" ref={el => this.el = el}></div>
    );
  }
}

function Example() {
  return (
    <div>
      <OrgChart></OrgChart>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

类组织结构图扩展了React.Component{
componentDidMount（）{
this.$el=$（this.el）；
设datascource={
‘姓名’：‘劳劳’，
“职务”：“总经理”，
“儿童”：[
{‘姓名’：‘博淼’，‘职务’：‘部门经理’}，
{‘姓名’：‘苏苗’，‘职务’：‘部门经理’，
“儿童”：[
{‘姓名’：‘铁华’，‘职称’：‘高级工程师’}，
{‘姓名’：‘嘿嘿’，‘头衔’：‘高级工程师’，
“儿童”：[
{'name'：'Pang-Pang'，'title'：'engineer'}，
{“姓名”：“祥祥”，“职称”：“UE工程师”}
]
}
]
},
{‘姓名’：‘洪淼’，‘职务’：‘部门经理’}，
{‘姓名’：‘春苗’，‘职务’：‘部门经理’}
]
};
这个.$el.orgchart({
“数据”：datascource，
“节点内容”：“标题”，
"潘":对,，
“缩放”：真
});
}
组件将卸载（）{
这个。$el.empty（）；
}
render（）{
返回(
this.el=el}>
);
}
}
函数示例（）{
返回(
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我也尝试过这个代码笔示例

首先，您需要安装jquery和orgchart（我正在使用npm）。 对于TypeScript，还应安装@types/jquery

然后需要将它们导入到React组件中

import $ from "jquery";
const orgchart = require("orgchart");

（为了允许此导入，我还向tsconfig.json的编译器选项添加了“allowSyntheticDefaultImports”：true。）

您还需要在组件中声明$el和el字段：

public $el;
public el;

现在已经准备好了，您可以将给定的组件didmount和componentWillUnmount添加到您的组件并返回

<div id="chart-container" ref={el => this.el = el}></div>

this.el=el}>

---

因为我不使用typescript，所以我不需要这两个公共声明。代码按预期运行。顺便说一句，Codepen的例子让我不仅找到了这个orgchart插件的解决方案，还找到了其他jquery插件的解决方案。我立刻想起React文档中讨论与其他库（esp jquery）集成的部分。