Diseño de código para la interfaz multidocumento tabbed para React SPA con react-router/react-router-dom?

Tengo la aplicación React SPA con la navegación de react-router/reacto-router-dom, que significa que hay react-router-dom (capa adicional para la react-router) Interruptor de la declaración con selecciona el camino:


    
    
    
    
     }/>
     }/>

Mi aplicación también ha react-router Enlaces en la barra de navegación, así que - es la forma en que funciona la navegación simple. Entiendo que la ejecución del enlace '/ventas/invoice/58' hace las siguientes 3 cosas:

  1. Se instantánea el componente InvoicePage;
  2. Se mueve el valor id 58 a los propulsores de InvoicePage;
  3. Hace visible el componente instantáneo (efectivamente elemento con gran contenido) y todos los componentes instantáneos restantes (si los hay, por ejemplo, InvoiceListPage) (que son sólo elementos / árboles DOM con gran contenido) visible=falso. No estoy seguro de si tales componentes fuera de la navegación liberan, mi suposición es, que se quedan en la memoria (en el árbol DOM). Tampoco estoy seguro de lo que sucede cuando se hacen 2 llamadas consecutivas 'sales/invoice/59' y 'sales/invoice/60' - es sólo un componente de FacturaPage instantánea y luego su atributo de props se cambia de 59 a 60 (que puede o no activar la recarga total o parcial de datos de acuerdo a la lógica de negocio codificada en ese componente)? O tal vez reactr-router asegura que dos llamadas diferentes con dos valores id diferentes crea dos componentes diferentes? (estas mini-cuestaciones no son preguntas en el sentido de la pregunta SO que debe ser contestada - Sólo estoy parloteando aquí y estoy enumerando los puntos para la consideración en el formato de pregunta, estas no son verdaderas preguntas SO)

Mi pregunta es... ¿Cómo puedo convertir este diseño en diseño multi-documento multi-tab? Mi aplicación debe sentarse en una página/tab del navegador y mi aplicación shoud tienen pestañas de nivel de aplicación. Por ejemplo, cuando el usuario presiona el enlace al InvoiceList, se abre la nueva pestaña de aplicación con el informe InvoiceList. Cuando el usuario selecciona una factura definida y este informe y haga clic para enlazar, se abre otra pestaña de aplicación con Invoice (con Id específico). Y el usuario puede abrir muchas pestañas con diferentes facturas.

¿Cuál es el diseño, las ideas para una interfaz multidocumento tan abreviada? Debe ser bastante difícil y confuso crear uno. Por ejemplo, el estándar de reaccion-router muestra #-link al componente activo en el campo url del navegador. Pero si mi aplicación SPA tiene múltiples pestañas de nivel de aplicaciones abiertas/activas con componentes/documentos de react multiabiertos, ¿qué enlace debe mostrar el navegador?

Y qué hay del soporte Redux - generalmente la aplicación tiene una aplicación amplia Redux tienda, pero ahora - cada componente (InvoiceListPage, InvoicePage, OrderPage) debe tener sus propias tiendas Redux - es decir, la tienda Redux debe ser implementada como el array y toda la aplicación SPA debe mantener algunos registros - que compoent a qué elemento de la matriz Redux pertenece ...

Sólo quería saber sobre el diseño general de la interfaz multi-documento multi-tab con la aplicación React SPA para la web.

Tal GUI multitab es bastante común - por ejemplo. Metasfresh https://github.com/metasfresh/metasfresh tiene uno, Lotus Notes tiene una interfaz multitab es la organización preferida de la interfaz multidocumento para el Microsoft WPF (al menos fue cuando leí sobre ella hace algún tiempo).

Pregunta hecha hace 3 años, 4 meses, 27 días - Por Brian

3 Respuestas:

  • En reactJS tienes estado local (este Estado o Estado de uso) has estado pasado de los componentes de los padres (llamados props), has estado pasado por los componentes del ancestro (llamado contexto) puedes tener estado de otras partes de la aplicación (redux, por ejemplo). Pero todo esto, son simplemente "estado", basado en el cual usted hace lo que quiere ver en la pantalla.

    Entonces, ¿qué es MDI de manera efectiva? Es una lista de documentos abiertos (así que necesita tener en algún lugar de su estado tal lista de documentos abiertos, cada elemento de los cuales el alma representa el estado actual de ese documento en particular), y un documento actualmente abierto que debe estar en algún lugar de su estado. En su ejemplo, el estado que le dice cuál es el documento actualmente abierto es la ubicación de reaccion-router!

    Así que usted podría utilizar redux (o crear su propia tienda) y mantener en algún lugar los documentos abiertos

    //store's instance
{
   ...,
   openDocuments:[
       { path: '/sales/invoice/1', title: 'Invoice #1', ... },
       { path: '/sales/invoice/2', title: 'Invoice #2', ... },
       { path: '/sales/order/13', title: 'Order #13', ... }
   ],
   ...
}
// The 'path' property of each openDocument serves as the id of that document
// and should be unique in the array

    A continuación, en su diseño debe tener una barra de navegación de tabbed que haría cada artículo como una pestaña y probablemente destacar la pestaña activa (utilizando el gancho de useMatch para comprobar si la ubicación de la página coincide con la id de ese artículo en particular).

    En medio de su diseño debe tener su regularidad que haría la página real basada en la ubicación del router de react. También puedes crear algunos hooks como useCurrentDocumentState leer el estado del documento actualmente abierto. ()En ese gancho por ejemplo usted leería de su tienda, encontrar el elemento en el array que corresponde al documento abierto real y devolverlo)

    En realidad, si lo piensas, la aplicación habitual de la página individual con la barra de navegación a la izquierda (menu items) es sólo una especie de interfaz multidocumento donde todos los elementos del menú se consideran "abiertos" pero sólo se centran cuando haces clic en ellos.

    No debería importar lo que pase en el DOM y si las pestañas permanecen abiertas pero ocultas o eliminadas de DOM. Es asunto de la react cuidar de la DOM, y en realidad esta es una de las razones por las que se construyó. Para que no te molestes por el DOM. Usted sólo debe preocuparse de qué tipo de información Tú desea mantener abierto para cada pestaña (Estado de las pestañas) en la vida de la aplicación.

    Respondida el Dec 18, 2020 a las 13:41 - por codecraftsman32c9

    Votos positivos: 0 | Votos negativos: 0

  • Para implementar una interfaz multitab en una aplicación React SPA con react-router/react-router-dom, puedes seguir los siguientes pasos:

    • Utiliza un componente TabBar para renderizar las pestañas de la aplicación. Cada pestaña deberá estar asociada a una ruta de react-router.
    • Al hacer clic en una pestaña, deberás renderizar el componente correspondiente a esa ruta en el área de contenido principal.
    • Para mantener el estado de las pestañas y los componentes abiertos, puedes utilizar el estado local del componente que contiene el TabBar y el contenido principal, o puedes optar por utilizar una solución de gestión de estado global como Redux.
    • Para gestionar las múltiples tiendas Redux, puedes dividir tu tienda principal en diferentes sub-almacenes para cada componente/tab. Cada componente/tab puede acceder a su sub-almacén específico mediante la configuración adecuada de Redux.
    • En cuanto a la navegación entre pestañas y la URL del navegador, puedes mantener la URL de react-router actualizada con la pestaña activa y los parámetros necesarios para cada componente/tab. Asegúrate de manejar la creación dinámica de rutas correctamente para permitir la apertura de nuevas pestañas con diferentes componentes.

    Aquí tienes un ejemplo simplificado del diseño de una interfaz multitab en React SPA con react-router:

    jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const TabBar = () => {
  return (
    
    
      Tab 1
      Tab 2
      Tab 3
    
    
  );
};

const TabContent = () => {
  return (
    
      
      
      
    
  );
};

const Component1 = () => 
    Component 1
    ;
const Component2 = () => 
    Component 2
    ;
const Component3 = () => 
    Component 3
    ;

const MultiTabApp = () => {
  return (
    
      
    
        
        
      
    
        
  );
};

export default MultiTabApp;

    Este es un ejemplo básico para mostrarte cómo puedes estructurar una interfaz multitab con react-router en una aplicación React SPA. Puedes ampliar este diseño para adaptarlo a tus necesidades específicas, como el manejo de múltiples pestañas abiertas y el uso de Redux para el estado global. Espero que esta información te sea útil para implementar la interfaz multitab en tu aplicación.

    Respondida el Dec 19, 2020 a las 13:38 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Diseño de Interfaz Multidocumento con Pestañas para React SPA

    Enrutamiento

    Utiliza react-router-dom y crea rutas para cada pestaña/documento. Mantén todas las rutas dentro de un Switch para asegurarse de que solo un documento esté visible a la vez.

    Ejemplo:

    javascript

    Gestión de Pestañas

    Usa un estado de React para administrar las pestañas abiertas. El estado debe incluir un array de objetos, cada uno representando una pestaña con su título, ruta y otros metadatos.

    Ejemplo:

    javascript
const [tabs, setTabs] = useState([]);

const openTab = (tab) => {
  setTabs([...tabs, tab]);
};

const closeTab = (tabId) => {
  setTabs(tabs.filter((tab) => tab.id !== tabId));
};

    Navegación por Pestañas

    Crea un componente de barra de pestañas que muestre todas las pestañas abiertas. Vincula cada pestaña a su ruta correspondiente utilizando react-router-dom Link. Cuando se hace clic en una pestaña, actualiza el estado para mostrar la pestaña seleccionada.

    Ejemplo:

    javascript
const TabsBar = () => {
  return (
    
  );
};

    Soporte Redux

    Mantén un almacén Redux separado para cada pestaña/documento. Utiliza un Provider único para cada pestaña para inyectar el almacén correcto en sus componentes.

    Ejemplo:

    javascript
const InvoiceTab = () => {
  return (
    
      
    
  );
};

const OrderTab = () => {
  return (
    
      
    
  );
};

    URL del Navegador

    La URL del navegador debe reflejar el documento activo actualmente. Utiliza react-router-dom useHistory hook para manipular la URL.

    Ejemplo:

    javascript
const history = useHistory();

const openTab = (tab) => {
  history.push(tab.path);
};

    Consideraciones de Diseño

    Gestiona cuidadosamente el estado de las pestañas para garantizar que se cierren correctamente al navegar lejos de ellas. Proporciona una forma para que los usuarios cierren pestañas y administren el espacio de trabajo. Considera el rendimiento y evita mantener demasiadas pestañas abiertas simultáneamente.

    Respondida el Dec 19, 2020 a las 13:52 - por Gemini

    Votos positivos: 0 | Votos negativos: 0