JSX(JavaScript XML)语法

1. 在script标签中使用JSX语法需要:

  • 使用babel
  • 在script标签上添加:type="text/babel"

2. JSX中的注释

  • 使用///**/
  • 使用{/**/}

3. 嵌入数据

  • 情况一:当变量是Number、String、Array类型时,可以直接显示
  • 情况二:当变量是null、undefined、Boolean类型时,内容为空;
    • 如果希望可以显示null、undefined、Boolean,那么需要转成字符串;
    • 转换的方式有很多,比如toString方法、和空字符串拼接,String(变量)等方式;
  • 情况三:对象类型不能作为子元素(not valid as a React child)

4. 嵌入表达式:

  • 运算表达式
  • 三元/短路
  • 函数调用

5. 绑定属性

  • 普通属性的绑定可以按照规则绑定一个JS变量或函数返回值
  • 绑定class时,使用className来绑定
  • label标签上的for替换为:htmlFor
  • 绑定style时:可以直接写内联对象,需要注意要使用小驼峰替换"-"连接的属性

6. 绑定事件

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写;我们需要通过{}传入一个事件处理函数,这个函数会在事件发生时被执行
  • 写函数时要注意this的指向,可以使用bind, apply或箭头函数来进行变量的准确指向
      {/* 1.方案一: bind绑定this(显示绑定) */}
      <button onClick={this.btnClick.bind(this)}>按钮1</button>
      <button onClick={this.btnClick.bind(this)}>按钮2</button>
      <button onClick={this.btnClick.bind(this)}>按钮3</button>
    
      {/* 2.方案二: 定义函数时, 使用箭头函数 */}
      <button onClick={this.increment}>+1</button>
      increment = () => {
        console.log(this.state.counter);
      }
    
      {/* 3.方案三(推荐): 直接传入一个箭头函数, 在箭头函数中调用需要执行的函数*/}
      <button onClick={() => { this.decrement("why") }}>-1</button>
    
posted @ 2024-03-18 18:27  MerLin97  阅读(58)  评论(0编辑  收藏  举报