Estoy tratando de implementar un árbol de casillas de verificación que tiene la siguiente estructura de datos para los elementos
const checkboxes = [{ field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [ { field: 'article.colorCode', id: 42, name: 'Color', parentId: 41, checked: false, children: [ { children: [], field: 'red', id: 43, name: 'red', parentId: 42, checked: false }, ], }, ], }] Cada vez que hago clic en el Article cuando no está marcado, debe establecer la propiedad checked como verdadera para el Article y los niños anidados y viceversa (es decir, si un niño está marcado y es el único hijo de su padre y ese padre también es el único hijo de súper padre además, los tres serían revisados)
¿Puede alguien ayudarme con una función recursiva para que no importa cuál sea la profundidad de los niños, todos los niños se alternan? Simplemente no puedo entender la recursividad.
Como mencionó reaccionar, supongo que prefiere una forma inmutable de hacerlo, ya que ese árbol podría almacenarse en el estado.
La función que desea usar es: la función toggleNodeInsideTree , y debe pasarle la identificación del nodo que desea alternar y los datos del árbol.
let data = [ { field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [ { field: 'red', id: 43, name: 'red', parentId: 41, checked: false, }, { field: 'article.colorCode', id: 42, name: 'Color', parentId: 41, checked: false, children: [ { children: [], field: 'test', id: 44, name: 'red', parentId: 42, checked: false, }, ], }, ], }, { children: [], field: 'red', id: 45, name: 'red', parentId: 41, checked: false, }, ]; let setCheckedValueForNodeAndChildren = (item, value) => { if (item.children) { return { ...item, checked: value, children: item.children.map((x) => setCheckedValueForNodeAndChildren(x, value) ), }; } else { return { ...item, checked: value }; } }; let toggleNodeInsideTree = (id, tree) => { return tree.map((x) => { if (x.id === id) { return setCheckedValueForNodeAndChildren(x, !x.checked); } if (x.children) { return { ...x, children: toggleNodeInsideTree(id, x.children) }; } return x; }); }; console.log(toggleNodeInsideTree(42, data));Dividiría esto en tres partes. Primero, necesitamos poder recorrer nuestros nodos y alterar los apropiados. En segundo lugar, necesitamos una forma de, comenzando con algún nodo en la jerarquía, invertir la propiedad checked en ese nodo y pasar este nuevo valor a todos sus descendientes. En tercer lugar, debemos combinar esto con algo que verifique las id de los nodos para encontrar dónde comenzar este proceso.
Aquí hay una versión que lo desglosa de esta manera:
const alterNodes = (pred, trans) => (nodes) => nodes .map ( node => pred (node) ? trans (node) : {...node, children: alterNodes (pred, trans) (node .children)} ) const checkHierarchy = ({checked, children, ...rest}, value = !checked) => ({ ... rest, checked: value, children: children .map (child => checkHierarchy (child, value)) }) const toggleHierarchy = (targetId, checkboxes) => alterNodes (({id}) => id == targetId, checkHierarchy) (checkboxes) const checkboxes = [{field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [{field: 'article.colorCode', id: 42, name: 'Color', parentId: 41, checked: false, children: [{children: [], field: 'red', id: 43, name: 'red', parentId: 42, checked: false}]}]}] console .log (toggleHierarchy (41, checkboxes)) .as-console-wrapper {max-height: 100% !important; top: 0}