我在React App中设置内联CSS样式时遇到了麻烦。我想根据数组中的数据更改我的卡的背景颜色但是没有这样做。我正在使用具有switch语句的变量并将其作为内联样式传递,但背景颜色不会更改。任何人都可以帮我解决这个问题,或者告诉我另一种解决方法。谢谢 。
这是我的Card.js
import React , { Component } from 'react'
export default class Card extends Component {
render(){
const {title , date , description , color } = this.props.node
let cardClass = "card-wrapper"
let myColor = ""
switch(color) {
case 'red':
myColor = 'color--red'
break;
case 'blue':
myColor = 'color--blue'
break;
case 'yellow':
myColor = 'color--yellow'
break;
case 'darkBlue':
myColor = 'color--darkBlue'
break;
default:
break;
}
return (
<div style={{ backgroundColor: myColor }}>
<div className={cardClass}>
<div className="card">
<h5 className="card-title">{title}</h5>
<p>Created on {date}</p>
<p className="card-text">{description}</p>
</div>
</div>
</div>
)
}
}
这是我的App.css文件
.card-wrapper {
width: 209px;
margin: .4%;
float: left;
background-color: #5cb85c;
color: white;
padding: 16px;
border-radius: 1px;
}
.color--red {
background-color: #d9534f;
}
.color--blue{
background-color: #5bc0de;
}
.color--darkBlue{
background-color: #428bca;
}
.color--yellow {
background-color: #FFD333;
}
这是我的data.js文件
export const data = [
{
title : 'title',
date : '1537032686201',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'red'
},
{
title : 'title',
date : '1537032686202',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'blue'
},
{
title : 'title',
date : '1537032686203',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'darkBlue'
},
{
title : 'title',
date : '1537032686204',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color: 'yellow'
},
]
最好的选择是使用classnames
npm包。
做就是了:
npm install --save classnames
见:https://www.npmjs.com/package/classnames
然后你的代码如下:
import React , { Component } from 'react';
import classnames from 'classnames';
export default class Card extends Component {
render(){
const {
title,
date,
description,
color
} = this.props.node;
return (
<div
className={classnames(
'card-wrapper', {
'color--red': color === 'red',
'color--blue': color === 'blue',
'color--yellow': color === 'yelow',
'color--darkBlue': color === 'darkBlue',
}
)}
>
<div className="card">
<h5 className="card-title">{title}</h5>
<p>Created on {date}</p>
<p className="card-text">{description}</p>
</div>
</div>
)
}
}
你应该使用className
而不是style
:
return (
<div className={myColor}>