使用JSX的基本使用

注释

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 注释 */}
      </div>
    )
  }
}

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 (
      <div>
        <p id='p1'>原生语法绑定</p>
        <p id={this.state.id}>绑定一个变量</p>
        <p className={this.state.box}>给元素添加类名时不能使用class</p>
        <p style={{color: 'red', fontSize: '100px'}}>绑定样式必须通过对象的形式来绑定</p>
      </div>
    )
  }
}

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 (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

export default App;

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

书写规范

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div>
        <p>建议将JSX放置在()圆括号中</p>
      </div>
    )
  }
}

export default App;

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

绑定事件

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={(event) => this.myFn(event)}>按钮</button>
      </div>
    )
  }
  myFn = (event) => {
    console.log('绑定事件使用驼峰命名');
    console.log(event, '这个事件对象是React基于原生事件对象合成的一个事件对象');
  }
}

export default App;

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