1、樣式

樣式是一個介面的展示問題的核心，在樣式方面，react和一般的web網頁的區別還是挺大的。

第一、在react中，不使用class屬性來新增樣式，而是使用className屬性。

第二、在react中，它的內聯物件是使用物件的方式來表達的，而一般的web網頁的內聯樣式，是一個字串。

示例如下：

//css
.colorRed{
    color: red;
}
//render函式中
render(){
    return ( 
        <div style={{background:'#000'}} className='colorRed'>
            mapbar_front
        </div
 
>
    )
}

在這裡，我們需要注意一個重要的點。style後面有兩個大括號（外層大括號和內層大括號），外層大括號代表jsx語法，表示裡面的東西要使用js的方式進行解析，而內層大括號代表了物件，就是使用了一個物件來表達樣式。

關於物件的方式，我們可以寫成下面的方式：

var styleObj = {
    width: '200px',
    height: '150px',
    color: 'red'
}
render(){
    return ( 
        <div style={styleObj} className='colorRed'>
            mapbar_front
        </div
 
>
    )
}

2、圖片

在react中，載入圖片分為兩種，一種是本地圖片的載入，一種是網路圖片的載入。

網路圖片的載入

網路圖片的載入，和一般的dom元素沒有區別：

render(){
    return (
        <div>
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />
        </div>
    )
}

但是呢，圖片一般是後臺傳過來的變數，我們一般用在jsx語法的{}中來表示。

//如果有一個src的state。
render(){
    return (
        <div>
            <img src={this.state.src} />
        </div>
    )
}

本地圖片的載入

本地圖片的載入的第一種方式——require

render(){
    return <div>
        <img src={require('../assets/logo.png')} />
    </div>
}

另一種方式就是import。

import img from '../assets/logo.png';
//render函式中
render(){
    return ( 
        <img src={img} />
    )
}

//樣式總結

//影象顯示問題總結