react的jsx语法和定义组件

安装运行

安装

    npx create-react-app 项目名称

进入目录

    cd 项目名称

启动项目

    npm start

JSX语法的注意事项

1. 组件中只有一个根元素
2. 可以用Fragment做包裹元素，它不会被渲染为一个真实节点
3. 标签在js中直接写，不用做为字符串加"",js语法的部分要在{}中定义
4. class属性用className替代, label标签的for属性用htmlFor替代
5. jsx中不能用if语句，用三元运算来替代
6. const str = "<em>111</em>"

//直接渲染，不解析标签   
<p>{str}</p>
// 解析标签
<p dangerouslySetInnerHTML={{__html: str}}></p>

7. 获取标签上的自定义属性,用e.target.dataset.index获取
   e.target 获取dom

<div data-index="3">

8. 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
        })
    }