React-JSX

JSX

1. 优点：
   • JSX执行更快，编译为jasvascript速度更快，进行了优化
   • 类型更安全，编译过程如果出错就不能编译，及时发现错误
   • JSX编写模板更加简单快捷
2. 注意：
   • JSX必须要有唯一的根节点
   • 正常的html元素要小写，大写默认为组件
3. JSX表达式{}
   • 由html元素构成
   • 中间如果需要插入变量使用{}
   • {}可以使用表达式
   • {}中间表达式中可以使用JSX元素
   • 属性和html内容一样都是用{}来插入内容

JSX表达式

• 最基本的+运算

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const root = document.getElementById('root')
const element = (
  <div>
    <h1>helloword</h1>
    <h1>{1+1}</h1>
  </div>
)
ReactDOM.render(
  element,
  root
);

• 使用三目运算符

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const root = document.getElementById('root')
// 三目运算
const num = 1
const element = (
  <div>
    <h1>{num === 2 ? '2' : '不是2'}</h1>
  </div>
)
ReactDOM.render(
  element,
  root
);

• 添加class类

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const root = document.getElementById('root')
// 三目运算
const num = 1
const color = 'bgc'
const element = (
  <div className={color}>
    <h1>{num === 2 ? '2' : '不是2'}</h1>
  </div>
)
ReactDOM.render(
  element,
  root
);