更改时尾风颜色未显示

Question

我得到了一个阵列，其颜色已经在tail默认的调色板中定义了，如下所示，

colors: ["red-600", "blue-600", "pink-600", "black", "white", "yellow-600"]

我在数组上映射了，以产生带有阵列中定义的背景颜色的小盒子。

{colors.map((col, i) => (
        <button
          className="cursor-pointer"
          key={i}
        >
          <div
            className={`mt-3 border-2 border-solid border-black bg-${col} w-8 h-8`}
          >

我的问题是，如果我更改数组中的任何颜色（例如将红色-600更改为红色900），尽管这两种颜色都在默认的调色板

这里有可能出错？

Answer 1

我曾经有一个问题，同时尝试了类似于您当前尝试的东西……我意识到您不能部分将尾风值设置为变量，而是如果您要去为其使用变量。

示例：

严格为 bg-colors制作数组

bgColors: [
  "bg-red-600",
  "bg-blue-600", 
  "bg-pink-600", 
  "bg-black", 
  "bg-white", 
  "bg-yellow-600"
]

现在，您应该能够将它们用作具有整体值而不是部分值的变量。

className={`${col}`} // ${col} === bg-color-###

Answer 2

首先，您应该将颜色数组设置为 state ，当此数组更改时，该内容使该组件会重新渲染。

第二，如果仅在内部订购颜色数组更改，则不会强迫此组件重新渲染以读取状态更改，因此您应添加另一个状态来强制组件RE - 像这样的胶片[forcechangecolor，setforcechangecolor] = usestate（0）：

const [colors, setColors] = useState(["red-600", "blue-600", "pink-600", "black", "white", "yellow-600"])
const [forceChangeColor, setForceChangeColor] = useState(0)

const handleChangeColor = () => {
  setColors([/*set your change colors*/]) // <=== set Colors change in here
  setForceChangeColor(prev => prev + 1) //<=== Make another state change to force this component re-render to re-read colors state
}


{colors.map((col, i) => (
        <button
          className="cursor-pointer"
          key={i}
        >
          <div
            className={`mt-3 border-2 border-solid border-black bg-${col} w-8 h-8`}
          >