关于JSX

**理解:**javascript和HTML的结合，碰到<就按照HTML来解析，碰到{}就按照js来解析。也可以理解为可以在js代码书写HTML标签，每个标签最终都会转化为js代码来运行。
他的语法规则大致如下：

必须有根元素，即最外层有且只有一个标签；
所有的标签必须闭合；
对大小写敏感，区分是组件还是Html标签；
属性值必须加引号或者加{};
标签内放"<"会报错，因为他会按照Html来解析；
数组的循环（每个元素都会返回一个react组件）;
JSX允许让事件直接绑定在标签上。例如：
行内样式必须使用{{}}，也就是说属性值不能是字符串，必须是对象的格式，属性名四驼峰试的。
对应解释
1:

render(){
   return(
       <div>
          所有的页面内容都要在这个标签内书写，如果同级别再出现一个标签，会报错
       </div>
    )
}

3：

<Tab></Tab>   //会被识别为一个组件，使用之前需要从对应的位置引用，否则会报错
<div></div>    //被识别为一个Html标签

4：

<div className={} className="" style={{}}></div>   //所有的属性都只有这两种格式

6：

data.map((item,index)=>{
    return(
    <li></li>     //li标签相当于一个组件，此处li标签的同级不能放其他标签也是遵循JSX语法
    )
})

7.关于事件绑定，通常使用的方式有三种，1、使用bind绑定；2、使用箭头函数；3、使用class属性的方式

1：
handleClick(){console.log(this)} //此处this打印结果就是该组件的实例，如下图
render(){
   return(
     <div onClick={this.handleClick.bind(this)}></div>
   )
}
2:
handleClick(){console.log(this)} //此处this打印结果就是该组件的实例，如下图
render(){
   return(
     <div onClick={()=>this.handleClick()}></div>
   )
}
3:
handleClick=()=>{console.log(this)} //此处this打印结果就是该组件的实例，如下图.要用箭头函数才行，否则找不到this
render(){
   return(
     <div onClick={this.handleClick}></div>
   )
}

this指的是
区别：第一种、第二种，每次render都会重新绑定一次，且第二种参数需要传递两次；
第三种无法绑定参数，通常用于在组件之间的传递，子组件接收方式：this.props.handleClick就可以拿到。
第三种使用场景：例如：一个计步器是一个单独的组件，在不同的父组件中需要用到，可以使用

//父组件
export default class F_component extends Component{
   state={
     tepper:0,
   }
  changeStepper = (str)=>{
    if(str==='red'){
      this.setState({
        stepper:this.state.stepper-1
      })
    }
    if(str==='add'){
      this.setState({
        stepper:this.state.stepper+1
      })
    }
  }
   render(){
     return(
       <div>
         <C_component stepper={this.state.stepper} changeStepper={this.changeStepper}/>
       </div>
     )
   }
}

//子组件
export default class C_component extends Component{
  transf=(str)=>{
     this.props.changeStepper(str)
  }
   render(){
     return(
       <div>
          <span onClick={this.transf.bind(this,"red")}>-</span>
            <input value={this.props.stepper} onChange={()=>{}}/>
          <span onClick={this.transf.bind(this,"add")}>+</span>
       </div>
     )
   }
}

在这里插入图片描述
此处样式忽略，这样一个计步器，就可以在任何页面使用，同时，在父组件也可以拿到计步器当前的数值
注意：在子组件中如果直接通过this.props.changeStepper调用父组件的方法也可以，这样的话就需要传递两个方法过来，同时不能加()，否则会直接调用，从而报错。如果通过中间函数转换一次就可以保证功能的情况下书写简单。

关于JSX

关于JSX

猜你喜欢