react-jsx语法细节补充

注释方法

render() {
        return (
            // fragment内部封装的站位符
            <fragment>
                {
                    // 注释方式1--多行注释
                }
                {/*注释方式2--单行注释*/}
           </fragment>

样式命名

将class改为className
因为react会将class认为是一个类 class是个关键词

对html标签进行识别

 {
                        this.state.list.map((item, index) => {
                            return (
                                <li
                                    key={index}
                                    onClick={this.handleInputdele.bind(this, index)}
                                    dangerouslySetInnerHTML={{__html: item}}
                                    //对html的标签不进行转义
                                ></li>
                            )

                        })
                    }

label扩大点击范围

       <div>
                 //htmlFor会区别循环的for 
                 // htmlFor='元素id'
                    <label htmlFor="insertArea">请输入内容</label>
                    <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} className="input" id="insertArea"/>
                    <button onClick={this.handleSubmlit.bind(this)}>提交</button>
                </div>

setState的同步异步区别

 - 同步设置

  this.setState({
          list:[...this.state.list,this.state.inputValue],
          inputValue:''
      })

 - 异步设置 es6语法继续优化
 - prevState表示代表修改前的数据状态 就等同于this.state
this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
}))

propTypes定义props传参的数据类型

defaultProps给props传参变量定义默认值

ref获取dom元素

render() {
        return (
       <fragment>
                <div>
                    <label htmlFor="insertArea">请输入内容</label>
                    <input
                        value={this.state.inputValue}
                        onChange={this.handleInputChange.bind(this)}
                        className="input" id="insertArea"
                        ref={(input)=>{this.input=input}}
                        //ref用来获取元素 
                    />
                 </div>
           </fragment>
        );
    }
     handleInputChange(e) {
        var value=this.input.value
        this.setState({
            // inputValue: e.target.value
            inputValue: value
        })
    }