jsx文件如何是什么

发布网友发布时间：2022-04-30 17:26

共2个回答

懂视网时间：2022-04-22 19:46

什么是jsx？jsx的用法又有哪些？本篇文章给大家带来的内容就是关于JSX是什么？jsx的使用方法介绍（附代码），接下来就来看一下具体的内容吧。

在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 style={{color: 'red'}}>颜色</div>
  <div style={newStyle}>样式</div>
 </div>
 )
 }

通过上述案例，我们可以知道JSX中，样式的属性名称得用驼峰命名

jsx的使用之JSX中的HTML标签

在JSX中，有些标签名称为了防止冲突得做一些转换：

class得用className代替
lable元素中的for属性，得用htmlFor代替，如下：

<label htmlFor="msg" ></label>

这里还要注意，JSX中的所有标签必须得是闭标签