ReactJs中的內聯CSS樣式

Question

我在React App中設置內聯CSS樣式時遇到了麻煩，因為我想根據數組中的數據更改卡片的背景顏色，但沒有這樣做。 我正在使用具有switch語句的變量，並以inline樣式傳遞它，但是background-color不變。 任何人都可以幫助我解決此問題，或告訴我另一種解決方法。 謝謝 。

這是我的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'
     },
]

Answer 1

您應該使用className而不是style ：

return (
  <div className={myColor}>

Answer 2

最好的選擇是使用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>
        )
    }
}