从零开始学React--JSX

devtools/2024/11/12 6:19:22/

JSX 是 JavaScript 语法扩展,可以让你在 JavaScript 文件中书写类似 HTML 的标签。

所以JSX看起来像HTML,但是语法比HTML严格,比如只允许一个根节点,所有标签必须闭合,class属性要改成className等,参见使用 JSX 书写标签语言 – React 中文文档

JSX最强大的地方是可以在HTML里面写js代码

在 JSX 中通过大括号使用 JavaScript 

在jsx中,大括号包裹的就是js代码,里面可以使用变量,方法,对象,如果要使用注释可以使用 {/*使用js变量*/}这种方式

javascript">function JSXTest() {let message = '这是一条消息'return (<div>{/*使用js变量*/}{message}<br/>{/*使用方法*/}{new Date().getDate()}<div style={{color: 'red'}}>这是js对象</div></div>);
}export default JSXTest;

列表渲染

列表渲染是项目中经常用到的技巧,比如我们从后台拿到商品数据,在前台渲染成一张表格等,react的列表渲染没有特别的语法,就是用的js数组里面的方法,比如将数据list变成li的集合,可以使用数组的map方法

<ul></ul>是jsx语法,在里面使用js要写大括号,在map的回调函数里面返回html代码,在js代码里面写html需要些小括号

javascript">function JSXTest() {return (<ul>{list.map(item => {return (<li key={item.id}>{item.name}</li>)})}</ul>);
}

完整代码,因为只有一行代码,回调函数里面的大括号,return,小括号都可以省略

javascript">let list = [{id: 1, name: 'Vue'},{id: 2, name: 'React'},{id: 3, name: 'Angular'}
]
function JSXTest() {return (<ul>{list.map(item=><li key={item.id}>{item.name}</li>)}</ul>);
}export default JSXTest;

技巧:记住js里面写html需要用小括号包裹,html里面写js需要用大括号包裹(吐槽:看的头疼,还是习惯vue的写法)

条件渲染

条件渲染也是很常用的技巧,根据变量来显示隐藏组件,常用的有两种方式,逻辑与和三元运算

javascript">let isLogin = truefunction JSXTest() {return (<div>{isLogin && <span>login page</span>}<br/>{isLogin? <span>has Login</span> : <span>loading...</span>}</div>);
}export default JSXTest;

复杂条件渲染

上面两种方式只能实现简单的条件渲染,要想实现复杂的效果可以使用方法

javascript">function getArticleItem(type) {if(type == 0) {return <div>无图模式</div>} else if(type == 1) {return <div>单图模式</div>} else {return <div>双图模式</div>}
}
function JSXTest() {return (<div>{getArticleItem(0)}{getArticleItem(1)}{getArticleItem(2)}</div>);
}export default JSXTest;


http://www.ppmy.cn/devtools/43903.html

相关文章

SpringBoot + MybatisPlus

SpringBoot MybatisPlus 整合记录 1. 硬件软件基本信息2. 相关链接3. 通过idea快速生成一个Springboot项目4. 启动报错问题解决问题一&#xff1a;Springboot启动的时候报错提示 “没有符合条件的Bean关于Mapper类型”问题二&#xff1a;启动的时候提示需要一个Bean&#xff0…

Centos7网络故障,开机之后连不上网ens33mtu 1500 qdisc noop state DOWN group default qlen 1000

说明 这是Linux系统网络接口的信息&#xff0c;其中"mtu 1500"表示最大传输单元大小为1500字节&#xff0c;“qdisc noop”表示没有设置特殊的队列算法&#xff0c;“state down”表示该接口当前处于关闭状态&#xff0c;“group default”表示该接口属于“default”…

leetcode-189. 旋转数组 原地递归算法(非官方的三种方法)

Problem: 189. 轮转数组 思路 首先&#xff0c;很明显&#xff0c;题目要求的操作等同于将数组的后k%n个元素移动到前面来。 然后我们思考原地操作的方法&#xff1a; &#xff08;为了方便讲解&#xff0c;我们先假设k<n/2&#xff09; 1.我们将数组划分为 [A&#xff0c;B…

latex论文中将目录中第一章修改为第1章

解决办法&#xff1a; \ctexset{ chapter{ number\arabic{chapter}, tocline\CTEXifname{\protect\numberline{第 \thechapter 章 \hspace{0.3em}}}{}#2 } } 参考&#xff1a;求助&#xff0c;latex如何显示目录为第1章&#xff0c;第2章&#xff0c;用的是\titlecontents………

2024-5-10——统计已测试设备

2024-5-10 题目来源我的题解方法一 模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2960 我的题解 方法一 模拟 add记录前面已测试设备的数量&#xff0c;之后紧挨着的需要减add&#xff0c;若值大于0&#xff0c;则表示该设备可以被测试&#xff0c;add1;若值小于…

vue3的核心API功能:computed()API使用

常规使用方法: 这样是常规使用方法. 另一种,可写计算属性的使用方法: 这样分别定义computed的get回调函数和set回调函数, 上面例子定义了plusOne.value的值为1, 那么这时候就走了computed的set回调函数,而没有走get回调函数. 当我们打印plusOne.value的值的时候,走的是get的…

嵌入式不一定只能用C!

嵌入式不一定只能用C! ---------------------------------------------------------------------------------------手动分割线-------------------------------------------------------------------------------- 本文章参考了以下文章&#xff1a; 这里是引用 ------------…

docker-file 网络

docker挂载 1.绑定挂载&#xff08;Bind Mounts&#xff09;&#xff1a;绑定挂载是将主机上的文件或目录挂载到容器中。 docker run -v /host/path:/container/path image_name 2.卷挂载&#xff08;Volume Mounts&#xff09;&#xff1a;卷挂载将 Docker 数据卷挂载到容器中…