どのようにreactでOrgChartを使用しますか?

$ npm install jquery 
$ npm install orgchart

{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
 }

$ npm install expose-loader

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    config.module.rules = [
      ...config.module.rules,
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      },
    ]
    return config; 
  }
}

import $ from 'jquery';
import  'orgchart';
import 'orgchart/dist/css/jquery.orgchart.css';

 this.orgTree = ref} />
 
   
const options = {
  'data' : datascource, //    
  'depth': 20,
  'nodeContent': 'title',
  'createNode': this.addClick, //             
  toggleSiblingsResp: true, //             
  'visibleLevel': 2, //       
};
$(this.orgTree).orgchart(options);
  
   は  の りです.
Datascource  は のとおりです.
datascource = {
  name: '',
  title: '',
  id: '',
  children: [{
      name: '',
      title: '',
      id: '',
      children:[]
  }],
}
  
  については、 のAPIを  してください.
  
を  します.
  かどうか
デフォルト
  
data 
json or string 
Y 
データ・ソースは、     の  を  するために  されます.JSONオブジェクトであってもよいし、Ajaxリクエストを  するURLを む   であってもよい
pan 
boolean 
N 
false 
オンにすると、マウスのドラッグ＆ドロップで   を  できます.
zoom 
boolean 
N 
false 
ユーザーはマウスホイールで   を  /  できます.
zoominLimit 
number 
N 
7 
ユーザーが    を  できるようにする
zoomoutLimit 
number 
N 
0.5 
ユーザーが    を  できるようにする
direction 
string 
N 
"t2b"
    な は、t 2 b(「 から へ」、デフォルト )、b 2 t(「 から へ」)、l 2 r(「 から へ」)、r 2 l(「 から へ」を す)、
verticalLevel 
integer(>=2) 
N 
このオプションを  して、  したレベルのノードを  に   わせできます.
toggleSiblingsResp 
boolean 
N 
false 
 /   をクリックすると、 /   ノードを  /   にできます.
ajaxURL 
json 
N 
これには、 、 、  、ファミリー( ノードと  ノードを  )の4つのプロパティが まれます. なる  は、 なるノードのAjax  が  したURLを  する.
visibleLevel 
positive integer 
N 
999 
  の   で  されたレベルを します.
nodeTitle 
string 
N 
"name"
データ・ソースのプロパティの1つを、   ノードのヘッダー  のテキスト  に  します.  、ユーザーはnodetileオプションを  するだけで  なorghcartを  できます.
parentNodeSymbol 
string 
N 
"fa-users"
フォントAwesomeアイコンを  して、ノードにサブノードがあることを します.
nodeContent 
string 
N 
データ・ソースのプロパティを、   ノードのコンテンツ・セクションのテキスト・コンテンツに  します.
nodeId 
string 
N 
"id"
データ・ソースのプロパティを、    ノードの  の   に  します.
nodeTemplate 
function 
N 
  なノードの    をカスタマイズするテンプレート    です.パラメータは1つのみ  されます.「data」は、ノードを  するために  されるjson datasoureを します.
createNode 
function 
N 
    ノードをカスタマイズするコールバック  です.「$node」は  ノードDIVのjqueryオブジェクトを します.「data」は  ノードのdatasourceを します
exportButton 
boolean 
N 
false 
   のエクスポートボタンを  にします
exportFilename 
string 
N 
"Orgchart"
  の   をピクチャにエクスポートするファイル です.
exportFileextension 
string 
N 
"png"
    な はpngとpdfです.
chartClass 
string 
N 
""
  の   を1つのページでインスタンス したい  は、 なるクラス を  して  する  があります.
draggable 
boolean 
N 
false 
このオプションを  にすると、   のノードをドラッグ＆ドロップできます.  :この  はIEでは  しません.HTML 5ドラッグ＆ドロップAPIがサポートされていないためです.
dropCriteria 
function 
N 
ユーザは、ドラッグノードと    の  を  するために  の  を  できます.さらに、この  は3つのパラメータ(draggednode、dragzone、dropzone)を け れ、boolen のみを します.
initCompleted 
function 
N 
テーブルが  に   され、データがロードされ、  されるタイミングを  します. に、Ajaxデータ・ソースを  する  に  です.「$chart」は、   グラフのjqueryオブジェクトを すパラメータを  します.
レンダリング にクリックイベントを  する  がある  は、optionsに  します.
'createNode': this.addClick
  
APIによると、createNodeコールバックは2つのパラメータ、$node,dataを  する.
addClick = ($node, data) => {
    $($node).click(() => this.handleClick(data)); // click           ，         ，         
}
  
  してノードを  する  がある  は、 の  を います.
1)font-awesomeのダウンロード
$npm install font-awesome
  
2)  するjsファイルにfont-awesomeを  する
import 'font-awesome/css/font-awesome.css';
  
   は  の りです.
 、  
   を にして レンダリングする  について、   な  を  しました.
1、   を つのコンポーネントにカプセル するOrgTree
2、  なjsにこのコンポーネントを  し、stateでコンポーネントの レンダリングを  する
 のようになります.
{this.state.loading ? "    " /> : }
  
データが り わると、loadingをtrueに  し、データが  に ってからloadingをfalseに  し、OrgTreeのcomponentDidMountライフサイクルで     を  する  を び すと レンダリングされます.
  にプラグインアドレスを  プラグインアドレスを  https://github.com/dabeng/OrgChart 
   :https://juejin.im/post/5c4bb74c51882525dc62f969