在react中，我们的页面内容就是通过jsx来编写，那么jsx到底是什么呢？jsx其实就是javascript对象，会构建创建一个js对象来描述html结构的信息。这里要记住jsx是js的一种扩展语言，类似html但是又不是html，因为jsx中还能进行运算，判断，加入一些js语言等。
jsx的使用之JSX中的运算
render() {
return(
<div>
<h2>算数题</h2>
<ul>
<li>5+6={5+6}</li>
<li>6+6={6+6}</li>
<li>10*10={10*10}</li>
</ul>
</div>
)
}在JSX中是用 {} 来区分是HTML还是js的，也就是说，所有的js语言都得用 {} 括起来
jsx的使用之JSX中的变量
render() {
const flag = true;
return(
<div>
{flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
</div>
)
}jsx的使用之JSX中的样式
在JSX中,给元素添加样式也是用style属性，但是style里面放的是一个样式对象，如下所示：
render() {
var newStyle = {
background: 'blue',
fontSize:'15px'
}
return(
<div>
<div>颜色</div>
<div>样式</div>
</div>
)
}通过上述案例，我们可以知道JSX中，样式的属性名称得用驼峰命名
jsx的使用之JSX中的HTML标签
在JSX中，有些标签名称为了防止冲突得做一些转换：
class得用className代替
lable元素中的for属性，得用htmlFor代替，如下：
<label></label>
这里还要注意，JSX中的所有标签必须得是闭标签
相关推荐：
JavaScript的React框架中的JSX语法学习入门教程_基础知识
以上就是JSX是什么？jsx使用方法介绍（附代码）的详细内容，更多请关注php中文网其它相关文章！
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
0
9
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
