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

Question

我正在使用WebStorm IDE和React框架创建Dashboard App的前端。

因为我已经创建了UI设计，所以我想继续创建布局。我要先创建一个空矩形，然后在其中插入函数（不确定是否是最好的工作流程）

但是有一个问题，布局有点复杂，请参见图片：

我应该如何进行？

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

Answer 1

  

我应该使用嵌套的div标签并将其插入render函数吗？

是的，这就是您应该继续的方式。

使用css随意显示它们。您可以使用前端库来帮助您，例如：

• Material UI
• React Bootstrap

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

您还可以按照w3schools的指南进行操作，以了解有关flexbox的更多信息，以及它仅适用于css的工作原理（无材料或自举）