UIライブラリを使用して、ツリーデータの最後のノードからルートノードとスプライスラベルに戻る方法は？

ツリーデータの端からルートノードに戻り、ラベルをスプライスします

ツリー構造データを処理するときは、最終レベルのノード情報に基づいてルートノードに戻り、パス上のすべてのノードラベルをスプライスする必要があることがよくあります。たとえば、次のツリーデータが与えられます。

 const treedata = [
  {
    ラベル：「ノード1」、
    値： "1"、
    子供たち： [
      {ラベル：「ノード1-1」、値： "1-1"}、
      {ラベル：「ノード1-2」、値： "1-2"}、
    ]、、
  }、
  {
    ラベル：「ノード2」、
    値： "2"、
    子供：[{label： "node 2-1"、value： "2-1"}]、
  }、
];

目標は、最終レベルノードのvalue （たとえば「1-2」）に基づいて、そのノードからルートノードへのすべてのタグをスプライスすることであり、予想される結果は「ノード1/ノード1-2」です。

データ構造はルートから葉までのパスのみを提供するため、直接逆トラバーサルは実行不可能です。ただし、TDesignやElement-UIなどのUIライブラリが提供するツリーコンポーネントとそのイベントメカニズムを使用できます。

これらのライブラリのツリー型コンポーネントは、通常、クリック時にノードとその親ノードに関する情報を含むnodeオブジェクトを提供します。この情報を使用して、ルートノードまで上方に再帰的にトレースできます。

「1-2」のvalueノードをクリックすると仮定すると、tdesignのツリーコンポーネントは次のnodeオブジェクトを返すことができます。

 {
  ラベル：「ノード1-2」、
  値：「1-2」、
  親： {
    ラベル：「ノード1」、
    値： "1"、
    親：ヌル、
  }、
}

このオブジェクトを使用すると、 parent null （ルートノード）になるまでparentプロパティに再帰的にアクセスできます。このプロセスでは、各ノードのlabelスプライスして、完全なパスを取得します。

以下は、このアイデアに基づいたJavaScript関数です。ツリーデータとターゲットvalueを入力として受け取り、スプライスされたラベルパスを返します。

関数getPathLabel（treeData、TargetValue）{
  関数トラバース（ノード）{
    if（node.value ===ターゲットバリュー）{
      パス= []とします。
      currentNode = node;
      while（currentNode）{
        path.unshift（currentnode.label）; //配列の先頭にラベルを追加しますcurrentNode = currentNode.Parent;
      }
      return path.join（ "/"）;
    }
    if（node.children）{
      for（node.childrenのconst Child）{
        const result = traverse（child）;
        if（result）return result;
      }
    }
    nullを返します。
  }

  for（treedataのconstノード）{
    const result = traverse（node）;
    if（result）return result;
  }
  nullを返します。 //ターゲット値が見つかりません}


const path = getpathlabel（treedata、 "1-2"）;
console.log（path）; //出力：ノード1/ノード1-2

この関数は、深度最初の検索を通じてツリーデータを横断し、ターゲットノードを見つけ、再帰的に上向きに横断してラベルをスプライブします。これは、UIライブラリが提供するnodeオブジェクト構造に依存し、特定の実装はライブラリごとに異なる場合があることに注意する必要があります。実際のUIライブラリAPIに従って調整する必要があります。

以上がUIライブラリを使用して、ツリーデータの最後のノードからルートノードとスプライスラベルに戻る方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。