react的jsx语法和定义组件
安装运行
安装
npx create-react-app 项目名称
进入目录
cd 项目名称
启动项目
npm start
JSX语法的注意事项
- 组件中只有一个根元素
- 可以用Fragment做包裹元素，它不会被渲染为一个真实节点
- 标签在js中直接写，不用做为字符串加"",js语法的部分要在{}中定义
- class属性用className替代, label标签的for属性用htmlFor替代
- jsx中不能用if语句，用三元运算来替代
- const str = "<em>111</em>"
//直接渲染，不解析标签
<p>{str}</p>
// 解析标签
<p dangerouslySetInnerHTML={{__html: str}}></p>
- 获取标签上的自定义属性,用e.target.dataset.index获取
e.target 获取dom
<div data-index="3">
- JSX会自动解析数组，渲染数组中的每个元素值
const list = ['a','b']
...
list.map((item,index) => {
return <li key={index}>{item}</li>
})
//react核心模块用来解析JSX语法
import React, { Fragment} from 'react
...
// 定义函数组件
function 组件名(){
return (
<Fragment>
<div className={ 6 > 3 ? 'red': 'blue'}>
</div>
</Fragment>
)
}
定义类组件（有状态组件）
组件名要大写(首字母大写)
import React, {Component} from 'react'
class 组件名 extends Component{
constructor(){
super()
this.state = {
inputValue: '',
list: []
}
}
//自定义的方法
handlerChange(){}
handerClick(){}
//render函数
render(){
return (
<div></div>
)
}
}
组件中的数据绑定和事件绑定
render (){
return (
<div>
<input type="text" value={this.state.inputValue}>
</div>
)
}
改变数据
this.setState({
list: 新值
})
事件绑定
onChange={this.handlerChange.bind(this)} 表单发生变化时执行 bind是改变this指向
onClick={this.getdata} 点击事件
onKeyUp={this.handlerKeyUp} 键盘事件 e.keyCode === 13 回车键触发
{/* 既传事件对象，又传其它的值 */}
<button onClick={(e)=>{this.handlerDel(e,index)}}>删除</button>
注意:{this.handlerDel(e,index)}加括号表示直接调用 所以外部再用箭头函数,封装成一个函数
//用箭头函数来获取正确的this
handlerKeyUp = (e)=>{
if (e.keyCode === 13){
let list = this.state.list;
this.setState({
list: [...list,this.state.inputValue],
inputValue: ''
})
}
}
keyup=(e)=>{
if(e.keyCode===13){ 回车键触发
let list=this.state.list
list.push(this.state.values)
this.setState({
// list: [...list,this.state.inputValue], 展开运算赋
list:list,
values:''
})
console.log(this.state.list);
}
}
del(e,index){
console.log(e,index);
let list=this.state.list
list.splice(index,1) 数组方法 第一个参数根据索引删除,第二个是删除几位
this.setState({
list
})
}
