MENU

React学习笔记【2】

第三节

React JSX

对HTML进行扩充

优点

  • 执行更快:编译为javascript代码时进行优化
  • 类型更安全:编译过程如果出错,那么就不能编译,及时发现错误
  • JSX编写模板更加简单快速

要注意的问题

  • 必须要有根结点
  • 正常的普通HTML元素必须小写,如果是大写,默认认为是组件

JSX表达式

  • 由HTML元素构成
  • 中间如果需要插入变量,用{}括起来
  • {}中间可以使用表达式
  • {}中间表达式中可以使用JSX对象
  • 属性和HTML内容一样,都是用{}来插入内容

本节代码

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

let time = new Date().toLocaleTimeString();
let str = '当前时间是:';
const element = (
    <div>
        <h1>
            Hello world
        </h1>
        <h2>
            {str + time}
        </h2>
    </div>
)
// let man = '发热';

// const element2 = (
//     <div>
//         <h1>今天是否隔离:</h1>
//         <h2>{man == "发热" ? <button>隔离</button> : "不隔离"}</h2>
//     </div>
// )

let element4 = (
    <div>
        <span>横着躺</span>
        <span>竖着躺</span>
    </div>
)

let man = "正常";
const element3 = (
    <div>
        <h1>今天是否隔离:</h1>
        <h2>{man == "发热" ? <button>隔离</button> : element4}</h2>
    </div>
)
//HTML的样式类名要写className,因为class在JS中是关键词
let logo = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
const element5 = (
    <div className="bg-red">
        <img src={logo} />
        红色的背景颜色
    </div>
)

ReactDOM.render(
    element5,
    document.getElementById('root')
);
.bg-red{
    background-color: #ff0000;
}

文章标题:React学习笔记【2】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/235/

Archives QR Code Tip
QR Code for this page
Tipping QR Code