Los documentos de reacción dicen:

... En la implementación actual, puede expresar el hecho de que un subárbol se ha movido entre sus hermanos, pero no puede saber si se ha movido a otro lugar. El algoritmo volverá a representar ese subárbol completo.

Entonces, el parámetro key solo hace coincidir los niños en el árbol original con los niños en el árbol posterior para un solo padre.

¿Hay alguna manera de decirle a React que un niño se ha mudado a otro padre? ¿O otra solución para rastrear a los niños para las transiciones de CSS?

Por ejemplo:

Si uso:

 const [state, setState] = useState({ title1: ["e1", "e2", "e4"], title2: ["e3"] })

Para devolver una lista de listas a una función de representación:

 return Object.keys(state).map((title) => ( <div key={title}> {state[title].map((e) => ( <div key={e}>{e}</div> ))} </div> ));

Pero luego decida mover "e4" a title2 con un onClick en alguna parte:

 <button onClick = {onClick("e4","title2")}>Move E4 to Title2</button>

Usando esta función auxiliar onClick:

 const onClick = (elem, newtitle) => () => setState((s) => { const titles = Object.keys(s); const title = titles.filter((t) => s[t].includes(elem))[0]; //find which title contains the element return { ...s, [title]: s[title].filter((e) => e !== elem), // remove element from old title list [newTitle]: s[newTitle].concat(elem), //add it to new title list }; });

Esto representa el nuevo estado, donde e1, e2, e3 y sus padres se rastrean utilizando la propiedad clave, pero e4 se representa como un nuevo elemento en title2.

Ni siquiera sé por dónde empezar con esto, o si es posible, ya que los documentos dicen que no es posible de forma inmediata.

PD: quiero hacer esto para las transiciones CSS