1、定义
(1)JSX是一种JavaScript的语法扩展,其格式⽐比较像模版语⾔言,但事实上完全是在JavaScript内部实现的。
(2)JSX可以很好地描述UI,能够有效提⾼高开发效率,体验JSX
(3)JSX实质就是React.createElement的调⽤用,最终的结果React“元素”(JavaScript对象)。
使用
1)表达式{}的使用,index.js
const name = "react study";
const jsx = <h2>{name}</h2>;
2)函数也是合法表达式,index.js
const user = {
firstName: "tom",
lastName: "jerry"
};
function formatName(user) {
return user.firstName + " " + user.lastName;
}
const jsx = <h2>{formatName(user)}</h2>;
3)jsx是js对象,也是合法表达式,index.js
const greet = <p>hello, Jerry</p>
const jsx = <h2>{greet}</h2>;
4)条件语句使用,index.js
const showTitle = true;
const jsx = (
<div>
{/* 条件语句句 */}
{ showTitle ? <h2>{showTitle}</h2> : null}
</div>
);
5)数组使用
const arr = [1,2,3].map(num => <li key={num}>{num}</li>)
const jsx = (
<div>
{/* 数组 */}
<ul>{arr}</ul>
</div>
);
6)属性使用
import logo from "./logo.svg";
const jsx = (
<div>
{/* 属性:静态值用双引号,动态值用花括号;class、for等
要特殊处理理。*/}
<img src={logo} style={{ width: 100 }} className="img" />
</div>
);
7)CSS使用
import style from "./index.module.css";
<img className={style.img} />
JS的逻辑一定要写在{}
里面
原文始发于微信公众号(迪哥讲事):React系列-JSX
免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论