¿Cómo se pueden agregar elementos secundarios a elementos React ya declarados?

 const MyElement = <SomeComponent/>; MyElement.append(<SomeChild />); MyElement.append(<AnotherChild />);

Un ejemplo:

Digamos que está tratando de representar una lista de 'árbol', por ejemplo, una navegación de archivos donde tiene un número arbitrario de sublistas.

Ahora, si desea hacer esto primero en profundidad , necesita una referencia a los nodos existentes y poder agregarles elementos secundarios.

Ejemplo de estructura de datos:

Supongamos un montón de mapas anidados aquí. Cada clave es un archivo o carpeta. Su valor es un mapa de sus hijos.

 { [Folder_1] => { [Folder_1.1] => { [File_1.1.1] => null } [Folder_1.2] => { [Folder_1.2.1] => { [File_1.2.1.1] => null } [File_1.2.2] => null } } }

Ahora la salida de React que queremos es esta:

 <FileNavigator> <Node node={Folder_1}> <Node node={Folder_1.1}> <Node node={File_1.1.1}> </Node> </Node> <Node node={Folder_1.2}> <Node node={Folder_1.2.1}> <Node node={File_1.2.1.1}> </Node> <Node node={File_1.2.2}> </Node> </FileNavigator>

Nota sobre las respuestas SO existentes:

• ¿Cómo agregar un elemento secundario al elemento React? : Las respuestas en este se centran en React.createElement, lo que le permite pasar un accesorio de 'niños'. React.createElement no funciona para las adiciones de 'primero en profundidad', ya que asume que conoce a todos los elementos secundarios en el momento en que se llama al método.