当前位置：首页 > web >正文

JSX语法

web 2025/8/1 17:10:10

1. 认识JSX语法 
  	// 1. 定义根组件const element = <div>Hello World</div>// 2. 创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector('#root'))root.render(element)  
 
 
 这段element变量的声明右侧div的标签语法是？
 它不是一段字符串(因为没有使用引号包裹)
它看起来是一段HTML元素，但是我们能在js中直接给一个变量赋值html元素
其实是不可以的，如果我们将type = "text/babel"去除掉，那么就会出现语法错误；
其实她是一段JSX的语法；
 
 JSX是？
 JSX是一种Javascript的语法扩展，也在很多地方称之为Javascript XML，因为看起来就是一段XML语法；
它用于描述我们的UI界面，并且完全可以和Javascript融合在一起使用；
不同于Vue中的模板语法，不需要专门血虚模板语法中的指令(例如：v-for、v-if、v-else、v-bind)
 
 为什么React选择JSX？
  React认为渲染逻辑本质上与其他UI逻辑存在内在耦合(html->js->state->html ) 
 比如UI需要绑定事件(button、a原生等等)
比如UI中需要展示数据状态
比如某些状态发生改变时，又需要改变UI;
 
 它们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件；
 
 总结：JSX其实是嵌入到Javascript中的一种结构语法
 
 
 
2. JSX的基本使用 
 JSX的书写规范
 1.1. jsx结构中只能有一个根元素
1.2. jsx结构通常会包裹一个()， 将整个jsx当做一个整体，实现换行
1.3. jsx可以是单标签，也可以双标签，但是单标签必须以/>结尾 
 
 JSX的注释编写
 {/* JSX的注释写法 */}
 
 JSX嵌入变量作为子元素
 情况一： 当变量是Number、String、Array类型时，可以直接显示
情况二： null、undefined、Boolean类型时，内容为空 如果希望可以显示null、undefined、Boolean类型，需要转成字符串；
转换的方式有很多，例如：toString方法、和空字符串拼接，String(变量)等方式
 
情况三： Object对象类型不能作为子元素(not vaild as a React child)
 
 JSX嵌入表达式
 运算表达式
三元运算符
执行一个函数
示例代码如下：
   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">// 1.定义App根组件class App extends React.Component {constructor () {super()this.state = {counter: 100,message: 'hello world',names: ['张三', '李四', '王五'],aaa: null,bbb: undefined,ccc: true,friend: {name: 'kobe'},firstName: 'kobe',lasterName: 'bryant',age : 18,movies: ['流浪地球','星际穿越','独行月球']}}render () {// 1. 插入标识符const  { counter, message, names } = this.stateconst { aaa, bbb, ccc} = this.stateconst  { friend } = this.state// 2. 对内容进行呢运算后显示(插入表达式)const { firstName, lasterName }  = this.stateconst fullName = firstName + ' ' + lasterNameconst { age } = this.stateconst ageText = age >=  18 ? '成年人' : '未成年'const liEls = this.state.movies.map(movie => <li key={movie}> { movie }</li>)// 3. 返回jsx的内容return  (<div>{/*1. Number/String/Array直接显示出来 */}<h2>{counter}</h2><h2>{ message }</h2><h2>{names.join('、')}</h2>{/* 2. undefined/null/Boolean在页面中不显示，转成字符串可以在页面中*/}<h2>{String(aaa)}</h2><h2>{bbb + ''}</h2><h2>{ccc.toString()}</h2>{/* 3. Object类型不能作为子元素进行显示 */}{/* <h2>{friend}</h2>  */} {friend.name}{Object.keys(friend)[0]}{/* 4. 可以插入对应的表达式 */}<h2>{ 10 + 20 }</h2><h2>{ firstName+ ' ' + lasterName }</h2><h2>{ fullName }</h2>{/* 5. 可以插入三元运算符 */}<h2>{ age >= 18 ? '成年人' : '未成年' }</h2><h2>{ ageText }</h2>{/* 6. 可以调用方法获取结果 */}<ul>{liEls}</ul><ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul><ul>{this.getMoviesEls()}</ul></div>)}getMoviesEls () {const liEls = this.state.movies.map(movie => <li>{movie}</li>)return liEls}}// 2. 创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector('#root'))root.render(<App/>)</script></body></html>
 
 jsx绑定属性
 比如元素都会有title属性
比如img元素会有src属性
比如a元素会有href属性
比如元素可能需要绑定class
比如原生使用内联样式style
示例代码如下：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">// 1.定义App根组件class App extends React.Component {constructor () {super()this.state = {message: 'hello world',title: '哈哈哈',imgUrl: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMyNzc2NTgzLjA0NTAxODI%3D%27/0.png',href: 'http://www.baidu.com',isActive: true,objStyle: { color: 'red', fontSize: '30px' }}}render () {const  { message, title, imgUrl, href, isActive, objStyle } = this.state// 需求： isActive: true -> active// 1. class绑定的写法一：const className = `aaa bbb ${isActive ? 'active' : ''}`// 2. class绑定的写法二： 将所有的class放到数组中 const classList = ['aaa', 'bbb']if(isActive) classList.push('active')// 3. class绑定的写法三： 第三方库classnames -> npm install classnamesreturn  (   <div>{/* 1. 基本绑定 */}<h2 title={ title }>{ message }</h2>{/*  <img src={ imgUrl } alt=''/> */}<a href={href}>百度一下</a>{ /* 2. 绑定class属性： 做好使用className */}{/* js代码 -> class关键字 -> 用class做为属性名会被浏览器误解*/}<h2 className={className}>哈哈哈哈</h2><h2 className={classList.join(' ')}>哈哈哈哈</h2>{ /* 3. 绑定style属性: 绑定对象类型 */ }<h2 style={{color: 'red', fontSize: '30px'}}>哈哈哈哈哈</h2><h2 style={objStyle}>哈哈哈哈哈</h2></div>)}}// 2. 创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector('#root'))root.render(<App/>)</script>
</body>
</html>
 
 