プロジェクトのシナリオ:
最近、Ant Design のTreeツリー コントロールを使用してツリー データを表示しており、すべてのノードを表示する必要があります。
問題の説明
API ドキュメントでは、defaultExpandAll プロパティをデフォルトですべてのツリー ノードを展開するように設定できることがわかりますが、使用中にすべてのノードを展開できないことがわかります。
原因分析:
1. ExpandedKeys (制御された) 展開された指定されたツリー ノードと defaultExpandAll の間の競合が原因である可能性があると考え始めました; 2. テスト
1 の存在を回避するために、すべてのノードを展開できないことが判明しました。Baidu は、データの非同期ロード時にdefaultExpandAll が有効にならないことを確認しました (データの非同期ロード時には、defaultExpandAll がすでに実行されているため、デフォルトのプレフィックス属性は初期化時にのみ有効です)。
解決：
ヒント: データの読み込みが完了した後に、expandedKeys を制御するか、ツリーをレンダリングすることにより、完全な展開を実現できます。
ここでは同僚がパッケージ化した機能ツリーコンポーネントを使用していますが、コンポーネントを変更するのは簡単ではないため、完全な展開を実現するためにexpandedKeysを介してツリーを制御することにしました。
原則: 各ノードの下の最後の子ノードのキーを取得し (これがツリー ノードに与える一意の識別子です)、expandedKeys を通じてそれを実現します。
いくつかのコードスニペット:
/*
* 初始化树形数据展开项回调事件
* @param treeData 接口获取的tree数据
* @returns {*}
* const [expandKey, setExpandKey] = useState<any>([]);
*/
const mapTreeData = (treeData) => {
const setExpandKeys:any = expandKey;
treeData.forEach(child => {
if (child.children && child.children.length > 0) {
mapTreeData(child.children);
}
setExpandKeys.push(child?.id);
});
setExpandKey([...setExpandKeys]);
};
⚠️ここでは再帰的実装が使用されています
再帰: 関数の自己呼び出しです。このようにして、問題を同じ問題の小さなバージョンに分割して問題を解決します。ネストされた配列、ネストされたオブジェクト、またはより深くネストされた関係など、複雑な配列を処理できます。
ここでは、ツリーの入れ子になったデータのレイヤーが何層になるか、またどのレイヤーを走査するかがわからないため、ループの代わりに再帰が使用されています。再帰関数は、各再帰呼び出しの現在の状態を保存するスタックを維持し、サブ問題の結果を取得した後も関数が処理を続行できるため、コードがより簡潔になるため、ループよりも再帰が強力です。
もう 1 つの注意点:
現在の状態スタックは再帰的に維持されるため、再帰関数の setExpandKeys:any = ExpandKey は以前に保存されたデータを保持します。
以上は簡単な記録ですので、分かりにくい表現や無理な表現がありましたら、引き続きアドバイスさせていただきたいと思いますので、ご参考になれば幸いです。