React 学习笔记(一)

206 阅读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}

效果和上面是一样的

其他的属性和以前一样。

二、引入图片

1、引入本地图片时如

在ImgDemo.js中引入non.jpg

<img src={nonImg} alt="img"/>这样就可以引入图片。
也可以使用es5的方法,<img src={require('../assets/images/non.jpg')}/>,这样也可以直接引入本地图片。

2、引入远程图片:
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/27/16d7206d050beca5~tplv-t2oaga2asx-image.image" alt="logo"/> 直接在src中引入地址就行。