在React中创建表格网格

Question

我必须使用Reactjs在其中创建带有可变数目的初始框的这些框。对于2个首字母，我必须创建4个相同大小的方形框并在其中打印缩写。同样，对于5个首字母，我们必须创建9个框并对于11个首字母，我们必须创建16个框。有人可以为此发布响应代码吗？

Answer 1

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

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

您要做的是获取组件要获取的卡片数量，然后基于该卡片数量，您可以对每个元素应用特定的样式以设置其宽度。

我设置了这个非常简单的示例，以说明我的意思：

https://stackblitz.com/edit/react-yfrfg8

基本思想是使用按钮更新卡的数量，并根据该值创建应用于每个元素的类。在示例中，我正在使用引导程序，因为我不知道您使用的是什么CSS，因此我选择了最受欢迎的CSS。同样，按钮处理程序正在更改卡的数量。我猜想在您的情况下这是通过组件的props实现的，但其目的是向您展示如何创建条件逻辑来根据数量创建和应用样式。