So verwalten Sie Komponenten/Widgets, die dynamisch vom Endbenutzer hinzugefügt/entfernt werden können

Question

Wir erstellen derzeit eine Webanwendung mit React, in der der Benutzer Widgets auf einer bestimmten Seite hinzufügen/entfernen kann.

Zum Beispiel hat er ein anpassbares Dashboard, auf dem er Listen/Kalender/Tabellen/etc hinzufügen kann. Diese Widgets ihre Daten von Flux erhalten speichert würden, jedoch würde jedes Widget hat nur Zugriff auf seinen eigenen Zustand, so dass der Speicher Zustand würde wie folgt aussehen:

this.state = { 
    widgetStates: { 
    listWidget1: {...}, 
    tableWidget1: {...}, 
    tableWidget2: {...}, 
    ... 
    } 
} 

Das Widget mit der ID „tableWidget1“ würde dann nur habe Zugriff auf seinen spezifischen Status in diesem Geschäft.

Wie nähert man sich diesem? Wie und wo sollten wir die Informationen speichern, welche Widgets gerendert werden sollen und wie sie gerendert werden sollen?

Vielleicht ist unser gesamter Ansatz falsch, also sind wir in jeder Hinsicht beratend tätig.

Edit: Weitere Klarstellung.

Lassen Sie uns sagen, dass ich eine UserDataGrid Komponente wie dieses:

const UserDataGrid = ({id, users, sortDirection, onSortChange, isFetching}) => { 
    return (
     <DataGrid id={id} rows={users} isLoading={isFetching}> 
      <Header> 
       <SortableHeaderCell property="id" onSortChange={onSortChange} sortDirection={sortDirection}> 
        Id 
       </SortableHeaderCell> 
       <SortableHeaderCell property="displayName" onSortChange={onSortChange} sortDirection={sortDirection}> 
        Name 
       </SortableHeaderCell> 
       <SortableHeaderCell property="points" onSortChange={onSortChange} sortDirection={sortDirection}> 
        CPU 
       </SortableHeaderCell> 
      </Header> 
      <Column> 
       <TextCell property="id"/> 
      </Column> 
      <Column> 
       <TextCell property="displayName"/> 
      </Column> 
      <Column> 
       <NumberCell property="points" digits={2}/> 
      </Column> 
     </DataGrid> 
    ); 
}; 

Auf dem Armaturenbrett, ich habe ein „+“ - Taste, die mir eine Liste der addable Widgets zeigen würde.

Der Benutzer fügt nun das UserDataGrid zu seinem Dashboard hinzu.

So müssen wir nun den Status des Widgets in unserem Geschäft auffüllen. Sobald das erledigt ist, können wir das Widget mit den Daten aus dem Geschäft rendern.

Das Problem besteht darin, dass diese Widgets möglicherweise interaktiv sind (siehe die sortierbaren Header in der UserDataGrid-Komponente). Ich möchte vermeiden, dass der gesamte Code für die Interaktionsverarbeitung in der Komponente implementiert werden muss, die die Widgets enthält, da er nicht wissen sollte, wie er mit den Aktionen der Kinder umgehen soll, je nach Trennung der Bedenken. Mit anderen Worten: widgetStates [UserDataGridInstance42] wäre kein einfaches Objekt, sondern ein kleiner Speicher, der von UserDataGridInstance42 verwendet wird, so dass UserDataGrid eigene Aktionshandler definiert, die im "Store" ausgeführt werden, wenn eine Aktion ausgeführt wird von einer UserDataGrid-Instanz wird ausgelöst.

Answer 1

Nur um sicherzugehen, ist dies das Benutzerszenario ich aus Ihrer Frage bekam:

1. Benutzer gehen zu einem Admin-Panel
2. In einer Checkbox er wählen kann, die
3. verwenden Widgets Sobald er ein Widget ausgewählt hat, erscheint das Widget in der Admin-Panel

Hoffentlich, ich bin cor rect. Wenn ja, könnten Sie eine Art Lazy-Loading-Mechanismus anwenden. Sie könnten eine Aktion versenden, die die Informationen für das neue Widget lädt.

Aber lassen Sie uns für einen Moment faulen Laden beiseite legen.mit so etwas wie

{this.state.widgetStates.tableWidget1 ? <TableWidget1 /> : null} 

Das ist es im Grunde Sobald tableWidget1 ausgewählt ist, stellen Sie seinen Zustand zu wahren und nur die Komponente laden. Sie könnten die widgetStates vom Server laden und Server-Side-Rendering hinzufügen, und so weiter ....