React 學習筆記(一)

1、React綁定屬性的時候注意事項:

在css中，給標籤添加類須要用class。
可是在React中由於class被佔用，因此標籤的類名class 更改成 className
<div className="red"></div>；
<label for=""></label> for的寫法須要改寫爲htmlFor；
標籤的style樣式:
在html和css中標籤若是添加行內樣式時只須要<div style="width:100px;"></div>這樣，
可是在React中若是直接寫style="width:100px;"會報錯，

因此須要寫爲style={{"width":"100px","height":"100px","background":"red"}}這樣才行，style={對象}。 也能夠在constructor中直接綁定數據綁定一個對象：

style={this.state.style}

效果和上面是同樣的

其餘的屬性和之前同樣。

2、引入圖片

一、引入本地圖片時如

在ImgDemo.js中引入non.jpg

<img src={nonImg} alt="img"/>這樣就能夠引入圖片。
也能夠使用es5的方法，<img src={require('../assets/images/non.jpg')}/>,這樣也能夠直接引入本地圖片。

二、引入遠程圖片:
<img src="https://user-gold-cdn.xitu.io/2019/9/27/16d7206d050beca5?w=117&h=38&f=png&s=2910" alt="logo"/> 直接在src中引入地址就行。