React的基本使用

React的使用

React跟Vue类似
React中插值使用{ }，而在Vue中是用{{ }}
React中使用class的话必须写成className

要想再React中渲染html标签固定写法：

//原生  js文件
const rawHtml=‘<span>富文本编辑器<i>斜体</i><b>加粗</b></span>’
const rawHtmlData={
__html:rewHtml //注意1，必须是这种格式
<p dangerouslySetInnerHTML={rawHtmlData}></p>

React 中如果要循环一个数组应该使用：map
React 中的map跟Vue中的v-for一样
React 中的key跟Vue中的key一样
map：重组数组，返回一个新数组，但是不会改变原数组

例如：list[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
list.map(item=>{item.id})  //输出[1,2,3]
list.map(item=>{item.name})  //输出['张三','李四',王五'']

在React中this默认是undefined

所有我们要改变this的指向
例如：我们要把张三改为李四
state就相当于Vue的data存储变量用的

在state中this.state={name:'张三' }

 1. 修改this的指向
 2. 创建一个方法来改变state中的name
 //bind改变this指向 如果不改变this的执行那么就会报错
this.clickHandLer1=this.clickHandLer1.bind(this)
<p onClick={this.clickHandLer1}> {this.state.name}</p>
clickHandLer1(){
//修改state中的变量要用：setState
	this.setState({
	name:'李四'
})
}

如果你不想每次都改变this的指向你必须要使用静态方法写：
在React中给元素添加事件
必须得加on
固定格式：例如 onClick(点击事件)等 on后面的单词首字母大写

<p onClick={this.clickHandLer2}> {this.state.name}</p>
//静态方法中的this永远指向方法的实例
clickHandLer2=()=>{
this.setState({
name:'李四'
})
}

调用事件是还可以传参：
在React中：
1.event是syntheticEvent组合。
2.event.nativeEcent是原生事件对象，模拟出来DOM事件所有能力
3.所有的事件，都被挂载到document上
4.和DOM事件不一样，和Vue事件也不一样

// this.clickHandLer3 你如果不穿参数默认是event
<a href=“www.baidu.com” onClick={this.clickHandLer3}> 跳转到百度</p>
//静态方法中的this永远指向方法的实例
clickHandLer3=(event)=>{
event.preventDefault() //组织默认行为 跳转不过去
event.stopPropagation()  //防止冒泡行为
console.log('event.target')  //获取的是 a标签本身
console.log('event.currentTarget') //获取的也是a标签本身 但是他是假象
console.log(event.nativeEcent.target) //指向的是当前元素
console.log(evenr.nativeEvent.currentTarget)  //指向的是document
}

给事件传参数

this.state({
list[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
})
<ul>{this.state.list.map((item,index)=>{
<li key={item.id} onClick={this.clickHandLer4(item.id,item.name,event)}>index:{item.id} </li>
)}</ul>
clickHandLer4=(id,name,event)=>{
console.log(id)
console.log(name)
console.log(event)
}