时间戳

首页 > 解决方案 > Map 函数在使用 tailwind 的实用程序类时以不同方式呈现第一个反应元素

javascript - Map 函数在使用 tailwind 的实用程序类时以不同方式呈现第一个反应元素

问题描述

我在我的项目中使用 Tailwind for CSS，并映射到这样的 React 按钮元素：

    <div className="flex flex-wrap justify-center items-center space-x-1 space-y-1">
        {domains.map((domain, index) => {
          return (
            <Button
              key={index}
              bgColor="transparent"
              hoverEffect="blue-500"
              textColor="gray-700"
              textHover="white"
              boarder="blue-500"
              boarderHover="blue-500"
              otherClasses="text-xs block rounded-full px-4"
              selcted="blue-500"
              buttonTitle={domain}
            />
          );
        })}
      </div>

编辑1：这是按钮组件

export const Button = ({
  bgColor,
  hoverEffect,
  textColor,
  textHover,
  boarder,
  boarderHover,
  otherClasses,
  buttonTitle,
  selcted,
}) => {
  return (
    <>
      <div className="block">
        <button
          className={
            `bg-${bgColor} ${hoverEffect && `hover:bg-${hoverEffect}`}
          text-${textColor} ${textHover && `hover:text-${textHover}`}
          border border-${boarder} hover:border-${boarderHover} ${otherClasses}` +
            ` lg:focus:bg-${selcted ?? selcted} lg:focus:text-${textHover}`
          }
        >
          {buttonTitle}
        </button>
      </div>
    </>
  );
};

如果我渲染此代码，它会返回如下内容：（https://drive.google.com/file/d/1XqxRQ6bUTSQqZTJVqbv-c9Rs4hXy01J2/view?usp=sharing）

当我使用 flex 或 grid 时，地图中的第一个项目会获得不同的方向。我不明白我在这里做错了什么。如果我手动渲染几次，它会正确渲染。

标签： javascriptreactjstailwind-css

解决方案

伙计们抱歉更新晚了。但我发现这是tailwind CSS中垂直空间选项的一些问题。

class= "space-y-6"

类似的东西。如果您正在使用它，请尝试删除它。或找到解决方法，它应该可以工作。

推荐阅读