react中Fragment组件

什么是Fragment?在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面,那么就要用到我们的Fragment组件了,具体使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component, Fragment } from 'react';
class TodoList extends Component {
render(){
return(
<Fragment>
<div><input /><button>提交</button></div>
<ul>
<li>学习react<li/>
<li>Learning React</li>
</ul>
<Fragment/>
)
}
}
export default TodoList

react中state与setstate的使用

我们可以利用state来定义一些变量的初始值

1
2
3
4
//放在construcor里
this.state = {
list: [1, 2, 3]
}

react将HTML字符串解析为HTML标签

当后台返回的数据是字符串html的话,我们可以利用dangerouslySetInnerHTML属性来把字符串转换成html标签

1
2
3
4
function showhtml(htmlString){
var html = {__html:htmlString};
return <div dangerouslySetInnerHTML={html}></div> ;
}

react中label标签的作用

当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域

react子组件向父组件传值

子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×