react.js 如何 設置頁面div 背景圖片

1. 如何在react js 項目中設置div 背景圖片

     在傳統的項目中我們只需要在css文件中定義樣式，然后給div添加相應的class即可，

但是在react.js中，尤其是在用webpack 搭建的環境中，似乎直接寫定義class樣式就

不太管用了，因為這樣的react項目，定義class屬性需要用駝峰className={Obj（一個對象）},

而定義標簽上的樣式則用 style={(一個對象)}，的形式。

 

2.那么我們該如何給一個div添加背景圖片呢？

如下：

//首先引入需要的圖片路徑
import Background from '../../../images/login.jpg';

//定義背景樣式

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>
        )

    }

}

3.代碼截圖

　　

-----------結尾的分割線--------------------------------

4，如果您覺得我的文章對您有所幫助，歡迎打賞-----------謝謝-------