注释

 1 import React from "react";
 2 
 3 class App extends React.Component {
 4   render() {
 5     return (
 6       

 7         {/* 注释 */}
 8       
 9     )
10   }
11 }
12 
13 export default App;

• 在  JSX 中遇到  <  尖括号会当做元素来处理
• 在  JSX 中遇到  { 大括号会当做  JavaScript 代码来处理

绑定属性

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 'p2',
      box: 'box1'
    }
  }
  render() {
    return (
      

        
原生语法绑定

        
绑定一个变量

        
给元素添加类名时不能使用class

        
绑定样式必须通过对象的形式来绑定

      

    )
  }
}

export default App;

• 给元素的属性绑定变量就使用  {} 大括号语法
• 绑定类名不能使用  class ，因为  JSX 语法会转换为  createElement 函数调用
• 在绑定样式的时候必须通过  {} 对象的形式来编写，如果原生是  font-size 短横线必须将其转换为驼峰写法  fontSize 

嵌入内容

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'hello react'
    }
  }
  render() {
    return (
      

        
{this.state.message}
      
    )
  }
}

export default App;

• 任何合法的  JavaScript 表达式都可以写在  {} 大括号中
•  {} 大括号中放置  [] 空数组  undefined  null  true  false 不会显示任何内容

书写规范

import React from "react";

class App extends React.Component {
  render() {
    return (
      

        
建议将JSX放置在()圆括号中
      
    )
  }
}

export default App;

• 在  JSX 中只能有一个根元素
• 在  JSX 能用单标签就不要使用双标签

绑定事件

import React from "react";

class App extends React.Component {
  render() {
    return (
      

         this.myFn(event)}>按钮
      
    )
  }
  myFn = (event) => {
    console.log('绑定事件使用驼峰命名');
    console.log(event, '这个事件对象是React基于原生事件对象合成的一个事件对象');
  }
}

export default App;

• 为什么要在箭头函数的函数体中调用方法？
• 我需要自己手动调用方法，而不是让  React 帮我调用
• 方便传递参数
• 方便传递事件对象，这个事件对象是  React 基于原生的事件对象封装的