相关疑难解决方法(0)

我目前正在使用 NextJs 和 TailwindCss 开发一个页面。用户能够在本地加载图像并设置他们希望将图像分割成的水平/垂直（行/列）的数量。为了正确显示它，我需要将网格设置为正确的数量父元素中的列。

我有一个在本地调用的 API，它使用 Sharp 来执行分割并计算宽度和高度，并且我对数组中的图像进行排序，以便它们按顺序排列，因为它是异步的。然后，我还生成一个动态类字符串，该字符串仅填充适当数量的列，以便稍后分配给我的父网格元素类。

类串种群

const gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;

//*** At this point, the value of gridClass, if columns were set to 3, using template literals is :

'grid grid-cols-3 gap-2 pt-2'

//The proper string is now populated and passed back in the API response via classCss key

res.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass})

页面片段：

<div id="final">
  <div className={tileCss} > //<--This is where I pull in the generated class string …