如何将带有一类卡片的组件的背景颜色设置为上面定义的bgColour变量

Question

if语句中有一个名为bgColour的变量，我想用一类卡将其设置为div的背景色，但我尝试访问它时没有成功。有人能告诉我怎么解决这个问题吗？如果有一种方法可以使用一个单独的css页面来做到这一点，那就更好了。

renderIssues2 = () => {
let bgColours = ['Green', 'Yellow', 'Red'];
let statusOptions = ['Available', 'Under Maintenance', 'Not Working'];
return this.state.issues.length > 0 ?
this.state.issues.map((issue, index) => {
for (let i = 0; i < statusOptions.length; i++) {
if (statusOptions[i] === issue.status) {
let bgColour = bgColours[i];
}
}
return (
<div class="card" >
<div class="card-title">{issue.issues}</div>
<div class="card-body">{issue.message}</div>
</div>
);
})
:
null;
}

Answer 1

• 用于确定bgColour的forLoop是多余的
• bgColour是forLoop内部的block scoped

const { issues } = this.state;
let bgColours = ["Green", "Yellow", "Red"];
let statusOptions = ["Available", "Under Maintenance", "Not Working"];
return issues.length > 0
? issues.map((issue, index) => {
const colorPos = statusOptions.indexOf(issue.status);
const bgColor = bgColours[colorPos];
const style = bgColor ? {"backgroundColor": bgColor} : {};
return (
<div class="card" style={style}>
<div class="card-title">{issue.issues}</div>
<div class="card-body">{issue.message}</div>
</div>
);
})
: null;
};

Answer 2

您还可以创建一个状态到颜色映射的对象

const statusToColor = {
'Available': 'green',
'Under Maintenance': 'yellow',
'Not Working': 'red',
};
renderIssues2 = () => {
return this.state.issues.length > 0
? this.state.issues.map((issue, index) => {
const bgColor = statusToColor[issue.status];
return (
<div class="card" style={{ backgroundColor: bgColor }}>
<div class="card-title">{issue.issues}</div>
<div class="card-body">{issue.message}</div>
</div>
);
})
: null;
};

Answer 3

看起来就像是从bgColours数组中为变量bgColour指定了一个颜色值，但在渲染卡时没有使用该变量，因此颜色不会在任何地方使用。

将bgColour作为类添加到您的卡中，然后在css文件中，可能是您的主index.css中，为您的每种颜色创建类。

<div className={"card " + bgColour}>
<div className="card-title">{issue.issues}</div>
<div className="card-body">{issue.message}</div>
</div>

.Green{
background-color: green;
}
.Yellow{
background-color: yellow;
}
.Red{
background-color: red;
}

此外，在React中，当分配类名时，需要使用className，而不是class。样式化文档