Cenário do projeto:
Recentemente, estou usando o controle de árvore Tree do Ant Design para exibir os dados da árvore, exigindo que todos os nós sejam exibidos
Descrição do Problema
Na documentação da API, você pode ver que a propriedade defaultExpandAll pode ser configurada para expandir todos os nós da árvore por padrão, mas descobriu-se que todos os nós não podem ser expandidos durante o uso.
Análise de causa:
1. Comecei a pensar que poderia ser causado pelo conflito entre os nós da árvore especificada expandida (controlada) expandida e defaultExpandAll; 2. Para evitar
a existência do teste 1, descobriu-se que todos os nós não poderiam ser expandidos. Baidu verificou e disse que defaultExpandAll não tem efeito ao carregar dados de forma assíncrona (o atributo prefixo padrão só tem efeito ao inicializar, porque defaultExpandAll já foi executado ao carregar dados de forma assíncrona)
solução:
Dica: você pode alcançar a expansão total controlando as chaves expandidas ou renderizando a árvore após a conclusão do carregamento de dados
Aqui utilizo o componente de árvore funcional empacotado pelo meu colega, não é fácil mudar o componente, então escolho controlar a Árvore através de ExpandKeys para alcançar a expansão total.
Princípio: obtenha a chave do último nó filho em cada nó (aqui está o identificador exclusivo que você fornece ao nó da árvore) e, em seguida, realize-o por meio de chaves expandidas
Alguns trechos de código:
/*
* 初始化树形数据展开项回调事件
* @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]);
};
⚠️Implementação recursiva é usada aqui
Recursão : É a auto-invocação de uma função, desta forma, o problema é decomposto em versões menores do mesmo problema para resolver o problema. Matrizes complexas podem ser processadas, como matrizes aninhadas de matrizes, objetos aninhados de objetos ou relacionamentos aninhados mais profundos.
A recursão é usada aqui em vez do loop porque não temos certeza de quantas camadas de dados aninhados em árvore haverá e quantas camadas percorrer.
Outro ponto a ser observado:
como a pilha de estado atual é mantida recursivamente, setExpandKeys:any = expandKey na função recursiva retém os dados armazenados anteriormente.
O acima é apenas um registro simples. Se houver alguma expressão pouco clara ou irracional, ainda espero dar conselhos. Espero que seja útil para você.