Question

我正在寻找一个React插件来显示基于我在React应用程序中传递给它的JSON数据的组织结构图。我需要一些基本功能，例如，如果用户在组织结构图中单击某个雇员，那么作为回报，我将获得该雇员的完整个人资料信息。我已经搜索过它并提出了“ OrgChart”插件，但是现在我不明白如何将这个插件与react.js一起使用，因为我是react.js的初学者，所以不知道如何集成。如果您可以向我提供代码，将会很有帮助。

我见过this链接，但是又一次由于知识不足而无法理解将下面具有适当文件层次结构的代码放置在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')
);

Answer 1

我也尝试过这个Codepen示例。

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

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

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

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

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

public $el;
public el;

现在准备就绪，您可以将给定的componentDidMount和componentWillUnmount添加到您的组件中并返回

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

通过您的渲染方法。

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

1 个答案: