Как интегрировать / использовать плагин OrgChart с React JS

Question

Я ищу плагин реагирования для отображения организационной диаграммы на основе данных JSON, которые я передаю ей в своем приложении React. Мне нужна базовая функциональность, например, если пользователь нажимает на сотрудника в организационной диаграмме, я получаю взамен всю информацию о профиле этого сотрудника. Я искал его и придумал плагин "OrgChart", но теперь я не понимаю, как я могу использовать этот плагин сact.js, потому что я новичок в реагировать на J.js, поэтому не знаю, как его интегрировать. было бы полезно, если бы вы могли предоставить мне код.

Я видел эту ссылку, но опять же из-за недостатка знаний не смог понять, куда поместить приведенный ниже код с правильной иерархией файлов в response.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");

(Чтобы разрешить этот импорт, я также добавил "allowSyntheticDefaultImports": true в компилятор tsconfig.json.) *

Вам также необходимо объявить поля $ el и el в компоненте:

public $el;
public el;

Теперь все готово, вы можете добавить указанные componentDidMount и componentWillUnmount к вашему компоненту и вернуть

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

из вашего метода рендеринга.