0
201
VistasReaccionar árboles clasificables y título / información sobre herramientas para cada nodo
Utilizo la biblioteca React Sortable Tree y encontré el siguiente problema: ¿cómo puedo asignar un atributo de title HTML a cada nodo/ajustar cada nodo en la etiqueta Tooltip proporcionada por Ant Design, por ejemplo?
Este es mi código hasta ahora:
function App() { const data = [ {title: 'Felidae', children: [{title: 'wildcat'}, {title: 'lynx'}]}, {title: 'Canide', children: [{title: 'coyote'}, {title: 'fox'}]} ] const [treeData, setTreeData] = useState(data) return ( <div style={{height: 400}}> <SortableTree isVirtualized={false} treeData={treeData} onChange={treeData => setTreeData(treeData)} /> </div> );}
1 Respuestas
Responde la pregunta0
Para resolver el problema, redirija la propiedad onChange a una función para que pueda dejar que SorteableTree Component envíe los valores de forma natural y pueda controlarlos en una función:
import React, { useState } from 'react' import SortableTree from 'react-sortable-tree' const ExtraAppsTodoistList = () => { const data = [ {title: 'Felidae', children: [{title: 'wildcat'}, {title: 'lynx'}]}, {title: 'Canide', children: [{title: 'coyote'}, {title: 'fox'}]} ] const [treeData, setTreeData] = useState(data) const onChangeNode = (value) => { console.log(value) setTreeData(value) } return ( <div style={{height: 400}}> <SortableTree isVirtualized={false} treeData={treeData} onChange={onChangeNode} /> </div> ); } export default ExtraAppsTodoistList enter code herePuede verificar en la consola que, efectivamente, el Componente SortableTree devuelve naturalmente el nodo resultante en la variable de valor que luego puede controlar en un State Hook:
De esa manera, puede extraer la propiedad de título de cada nodo contenido en la variable de valor aplicando forEach:
value.forEach((item) => { console.log(item.title) });Espero que con este conocimiento puedas solucionar el problema. Por otro lado, lo mejor es NO controlar cada nodo sino al final de que el usuario termine de ordenar y modificar el contenido del Componente SorteableTree, haga clic en un botón para almacenar los cambios y ahí si puede aplicar paraEach a todo el árbol. para analizar qué Cada nodo raíz tiene nodos hoja y, por lo tanto, no hay raíces vacías, después de eso, verifique que pueda almacenar los nodos en sus estructuras de datos diseñadas para este propósito.