React/如何将变量分配给类名属性

Question

你好

在下面的代码中，我尝试将变量classNameDiv分配给类名，但它不起作用。奇怪的是，双花括号适用于下方的样式属性

return (
<div className="item" key={i}>
<img src={`./images/${myjson.images[index].name}`} alt="" />
<div className="allBoxes">
{myjson.images[index].palette.map((index2, j) => {
const b = myjson.images[index].palette[j]
const classNameDiv = "colorBox";
if (RefArrayPalette[index][j] === 1) {
classNameDiv = "colorBox2";//_________________first here___________
}
return (
<div
key={j}
//className="colorBox"
className={{classNameDiv}}  //____________________then here_____________
style={{ backgroundColor: index2 }}
onClick={calculateNewList}
/>
)
}, (i, index))}

Answer 1

在您的示例中，className是一个const，因此它不可重新分配，您应该使用let

divclassName道具应为字符串

className={{classNameDiv}}实际上意味着你将对象{ classNameDiv: classNameDiv }作为className道具传递

你应该做的是className={classNameDiv}

Answer 2

className属性需要一个字符串，但您传递给它的是一个对象:

className={{classNameDiv}}

只需将字符串值传递给它：

className={classNameDiv}

奇怪的双花括号适用于下方的样式属性

因为style属性需要一个对象。这并不是真正的"；双花括号"；，它是JSX属性(使用大括号(内部的对象文字(使用大引号(。