react 動態添加設置背景圖和className

react 設置背景圖

//首先引入需要的圖片路徑
import Background from '../../../images/login.jpg';
//(div.style.background  = `url(${Background}) no-repeat`;)
//定義背景樣式

var sectionStyle = {
  width: "100%",
  height: "400px",
// makesure here is String確保這里是一個字符串，以下是es6寫法
  backgroundImage: `url(${Background})` 
};

export default class Login extends Component{
//渲染頁面
render(){
        return (
    <div style={sectionStyle}></div>
        )

    }

}

react 設置多個className

1.在一個元素上設置樣式，有一個固定的樣式，然后還有一個使用三元運算符根據條件添加的樣式。

//比如說有一個固定樣式"title":
<div className="title">標題</div>，
//然后還要一個點擊高亮的樣式:
<div className={index === this.state.active ? "active" : null}>標題</div>

2.ES6 模板字符串

<div className={`title ${index === this.state.active ? 'active' : ''}`}></div>

https://www.cnblogs.com/vali/p/6419636.html
https://segmentfault.com/q/1010000012522905