Reactjs 在React中创建表格网格

Reactjs 在React中创建表格网格,reactjs,Reactjs,我必须用Reactjs创建这些盒子,里面有可变数量的初始盒子。对于2个姓名首字母,我必须创建4个大小相等的方形盒子,并在里面打印姓名首字母。同样,对于5个姓名首字母,我们必须创建9个盒子,对于11个姓名首字母,我们必须创建16个盒子。有人可以发布react代码来实现这一点吗有条件地应用样式,而不是实际渲染元素 要渲染元素,只需使用array.map() 您需要做的是获取组件获得的卡片数量,然后在此基础上,您可以对每个元素应用特定样式,以设置其宽度 为了说明我的意思,我设置了这个非常简单的示例:


我必须用Reactjs创建这些盒子,里面有可变数量的初始盒子。对于2个姓名首字母,我必须创建4个大小相等的方形盒子,并在里面打印姓名首字母。同样,对于5个姓名首字母,我们必须创建9个盒子,对于11个姓名首字母,我们必须创建16个盒子。有人可以发布react代码来实现这一点吗有条件地应用样式,而不是实际渲染元素

要渲染元素,只需使用
array.map()

您需要做的是获取组件获得的卡片数量,然后在此基础上,您可以对每个元素应用特定样式,以设置其宽度

为了说明我的意思,我设置了这个非常简单的示例:

基本思想是用按钮更新卡片的数量,并根据该值创建一个应用于每个元素的类。在这个示例中,我使用的是bootstrap,因为我不知道您使用的是什么CSS,所以我选择了最流行的CSS。此外,按钮处理程序正在更改卡的数量。我支持在您的情况下,这是通过组件的道具实现的,但其目的是向您展示如何创建条件逻辑,以根据数量创建和应用样式