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
);



React-JSX

  • 使用三目运算符
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
);



React-JSX

  • 添加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
);

React-JSX

上一篇:FMC子卡设计资料第457篇-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡


下一篇:.net core 生成二维码