React系列-JSX

admin 2025年2月15日22:29:35评论3 views字数 949阅读3分9秒阅读模式

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

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2025年2月15日22:29:35
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   React系列-JSXhttps://cn-sec.com/archives/1033662.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息