如何在 React Dashboard App 中创建复杂的布局

【问题标题】：How to create complicated layout in React Dashboard App如何在 React Dashboard App 中创建复杂的布局
【发布时间】：2023-03-12 11:05:01
【问题描述】：

我正在使用 WebStorm IDE 和 React 框架创建仪表板应用程序的前端。

由于我已经创建了 UI 设计，我想继续创建布局。我想首先创建空矩形，然后在其中插入函数（不确定这是否是最好的工作流程）

但是有个问题，就是布局有点复杂，见图：

我应该如何进行？

我应该使用嵌套的 div 标签并将它们插入到渲染函数中吗？还是有其他解决方案？

【问题讨论】：

【解决方案1】：

我应该使用嵌套的 div 标签并将它们插入到渲染函数中吗？

是的，这正是你应该继续的方式。

使用css 以您想要的方式显示它们。您可以使用前端库来帮助您，例如：

如果你想使用引导程序，你可以看看how to display the grid system。

您也可以按照w3schools 的本教程了解更多关于 flexbox 以及它如何仅与 css 一起使用（无需材料或引导程序）

【讨论】：