reactjs - 在 React 中创建表格网格

我必须使用 Reactjs 创建这些盒子，其中包含可变数量的首字母框。对于 2 个首字母，我必须创建 4 个大小相等的方形盒子并在其中打印首字母。同样，对于 5 个首字母，我们必须创建 9 个盒子和 11 个首字母我们必须创建 16 个盒子。有人可以为此发布反应代码吗？

标签： reactjs

这主要与有条件地应用样式而不是实际渲染元素有关。

对于渲染元素，只需使用array.map().

您需要做的是获取组件获得的卡片数量，然后基于此您可以将特定样式应用于每个元素以设置它们的宽度。

我设置了这个非常简单的例子来说明我的意思：

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