Question

我们目前正在使用React构建一个Web应用程序，用户可以在该应用程序中添加/删除特定页面上的小部件。

例如，他有一个可自定义的仪表板，他可以添加列表/日历/表格等。这些小部件将从Flux商店接收他们的数据，但是，每个小部件只能访问它自己的状态，因此商店状态将如下所示：

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

ID为＆＃34; tableWidget1＆＃34;的小部件然后只能访问该商店中的特定状态。

如何解决这个问题？我们应该如何以及在何处存储有关应呈现哪些小部件以及应如何呈现它们的信息？

也许我们的整个方法都是错误的，所以我们在任何方面都愿意接受建议。

编辑：进一步澄清。

假设我有一个像这样的UserDataGrid组件：

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>
    );
};

在仪表板上，我有一个＆＃34; +＆＃34; -button，它会显示一个可添加的小部件列表。

用户现在将UserDataGrid添加到他的仪表板。

因此，我们现在必须在我们的商店中填充小部件的状态。完成后，我们可以使用商店中的数据呈现小部件。

问题是这些小部件可能是交互式的（请参阅UserDataGrid组件中的可排序标头）。我想避免在包含小部件的组件中实现所有交互处理代码，因为根据关注点的分离，它不应该知道如何处理它的孩子的行为。 / p>

换句话说：widgetStates [UserDataGridInstance42]不是一个简单的对象，而是一个由UserDataGridInstance42使用的小商店，因此UserDataGrid将定义它自己的动作处理程序，它将在＆上执行＃34;存储＆＃34;何时触发UserDataGrid实例的操作。

Answer 1

为了确保，这是我从您的问题中获得的用户场景：

用户转到管理面板

在复选框中，他可以选择要使用的小部件

一旦他选择了一个小部件，该小部件将显示在管理面板
中

希望我说得对。如果是这样，您可以应用某种延迟加载机制。您可以调度一个加载新窗口小部件信息的操作。

但是，让我们把懒惰的装载放在一边。选择tableWidget1后，将其状态设置为true，然后使用

等内容上传组件

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

基本上就是这样。您可以从服务器加载widgetStates并添加服务器端呈现，依此类推......

如何管理最终用户可以动态添加/删除的组件/小部件

1 个答案: