根据从API获取的值改变信号颜色

Question

我想根据从React中API获取的值来改变信号点的颜色，例如:50，颜色为绿色，否则为50 <值&>100的颜色是红色。

StatusCard.jsx

StatusCard.propTypes = {
values: PropTypes.array,
};
StatusCard.defaultProps = {
values: [],
}
function StatusCard(props) {
const { values } = props;
const signal ="dot-good"
return (
<div>
{values.map(value => (
<div className='status-card '>
<div className="status-card__info">

<h4><i className={props.icon}></i> {props.area}</h4>
<h5>Air Quality: {value.field3} AQI <span className={signal}></span></h5>
<br />
<h5>Noise Level: {value.field4} dB <span className={signal}></span></h5>
</div>
</div>
))}
</div>
);
}
export default StatusCard

我可以根据从API获取的值来改变className吗

statusCard.css

.dot-good {
height: 9px;
width: 9px;
background-color: lime;
border-radius: 50%;
display: inline-block;
}
.dot-moderate {
height: 9px;
width: 9px;
background-color: yellow;
border-radius: 50%;
display: inline-block;
}
.dot-unhealthy {
height: 9px;
width: 9px;
background-color: orange;
border-radius: 50%;
display: inline-block;
}

谢谢你的帮助!

Answer 1

试试:

const signal = value.field3 < 50 ? "dot-unhealthy" : value.field3 < 100 && value.field3 > 50 ? "dot-moderate" : "dot-good"