Tengo este código que define la estructura de mi barra de navegación.

 const tabsStructure = [ {name: "File", menu: [ { name: "New", onClick: () => {/*Toggle component*/} }, {name: "Save", menu: [ { name: "Save to browser", onClick: () => {/*Toggle component*/} }, { name: "Save JSON", onClick: () => {/*Toggle component*/} } ], }, { name: "Load", onClick: () => {/*Toggle component*/} } ] }, {name: "Edit", menu: [ { name: "Resize", onClick: () => {/*Toggle component*/} } ] } ]; export default tabsStructure;

Esa matriz de objetos se importa a uno de los componentes de React que genera correctamente la estructura HTML. Me gustaría agregar algunas funciones para alternar otros componentes, a algunos de los elementos del menú (como puede ver en mi código). Lo haría estableciendo los estados adecuados de padre común de ambos, el elemento del menú y el componente que quiero alternar. Sin embargo, desde el alcance de este archivo no tengo acceso a otros componentes, sus estados, etc. Mi pregunta es: ¿cuál es la mejor manera de manejarlo? ¿Debo mover tabsStructure al estado del componente de la aplicación? Si es así, ¿sería posible mantenerlo en un archivo separado?

Aquí está la estructura que genera mi código: estructura

Por ejemplo, me gustaría alternar DocumentCreator haciendo clic en el elemento de menú "Nuevo".