React 入门第二步：搞懂 JSX 语法

 

JSX 是门第一个 JavaScript 的语法扩展，它不是步搞字符串，也不是语法 HTML。

JSX 可以很好地描述 UI 交互的门第本质形式，它具有 JavaScript 的步搞全部功能。JSX 可以生成 React “元素”。语法

基本使用

\src\index.js

import React from react import ReactDom from react-dom // 看上去是门第 HTML，但是步搞实际是JSX  const title = <h1>Hello React</h1> // 调用 ReactDom.render方法，传入 jsx和节点对象 ReactDom.render(title,语法document.getElementById(root)) 

在使用 JSX 时，可以简单直接的门第按照 HTML 的规则来使用(你需要牢记它并不是 html )，那么有多行代码时，步搞需要使用括号 () 包裹。语法

import React from react import ReactDom from react-dom // 使用括号包裹jsx ，门第可以换行，步搞代码更加整洁 const title = (   <div>    <h1>Hello React</h1>     <span>嘿嘿嘿</span>   </div> ) ReactDom.render(title,语法document.getElementById(root)) 

设置 VS Code 编辑器，让 JSX 代码补全：

文件--首选项--设置--用户设置 在用户设置添加 "emmet.includeLanguages": {           "javascript":"javascriptreact" } 

如下图所示：

JSX 表达式

前面说到 JSX 具有 JavaScript 的全部功能，而在具体使用时可以直接套用 HTML 的规则。换句话说，在 HTML 规则里，如何展现 JS 的免费信息发布网能力呢?

先来一点简单的常常甜头，JSX 中的能够进行：

动态显示数据 { } 调用方法: 自定义 + 内置 支持表达式, 支持三元表达式 模板字符串

接下来，我们开始搞它：

import React from react; import ReactDOM from react-dom; const name= 西岭老湿 function sayHello () {    return 大家好 } const obj = {    name: 刘备,   age: 100 } const flag = true // 请开始你的表演==== const title = (<h2>嘿嘿</h2>) // JSX 本身也是可直接食用的值哟 const App = (     <div>       { /* 注释在 jsx 中是这么个熊样子*/}      <p>name</p> { /* 这就鸳鸯(原样)展示了*/}      <p>{ name}</p> { /* 动态获取变量数据 */}      <p>{ sayHello()}</p> { /* 调用个函数违法吗? 不 */}       { /* 执行原生 JS 不合理吗? 合理 */}      <p>{ console.log(1111)}</p>      <p>{ Math.random()}</p>      <p>{ JSON.stringify(obj)}</p>       { /* 三元运算让你吃醋了? 没有 */}      <p>{ flag ? 登录的状态 :执行登录}</p>       { /* 模板字符下,字符串和变量结婚,可以吗? 可以 */}      <p>{ `hello, ${ name}`}</p>       { /* JSX 也是可直接食用的值哟 */}      <div>{ title}</div>     </div>   ) ReactDOM.render(App,document.getElementById(root));  JSX 本身就一个表达式 JSX 添加属性：

字符串属性，直接使用双引号包裹

动态属性，不用双引号，直接使用 { } class={ xxx}

JSX 添加子元素

JSX 只有一个父元素

单标签必须闭合 // 01 jsx 本身就是一个表达式 const names = <h3>西岭老湿</h3> // 02 添加属性 const age =99 // 03 jsx 添加子元素（JSX只有一个父元素） // 04 单标签必须闭合 // 组件 functionApp() {    return (     // 返回中只能有一个JSX 块     // <p></p> // 报错     <div>       { /* jsx 本身就是一个表达式 */}       { names}       { /* 添加属性 */}       <page="age">用户年龄属性</p>{ /* 字符串属性 */}       <page={ age}>用户年龄属性</p>{ /* 动态属性 */}       { /* 单标签必须闭合 */}       { /* <img >   */}{ /*报错*/}       { /* 单标签正确写法 */}       <img/>     </div>   ); } exportdefault App; 

最后，JSX 最好使用一个小括号 () 包裹。

事件绑定

事件处理函数和事件绑定

// 事件处理函数 const event1 =function(){    alert(嘿嘿 React) } functionApp (){    return (     <div>       <h1>事件绑定</h1>       { /* 事件名使用驼峰法命名、直接使用函数赋值，不是函数调用 */}       <buttononClick={ event1}>你点啊</button>     </div>   ) } exportdefault App 

事件传参

事件处理函数和事件绑定

因为事件绑定需要接收函数本身，作为事件处理，不能直接调用。

//事件传参 const event1 =function(name,age){    alert(name)   alert(age) } functionApp (){    return (     <div>       <h1>事件绑定</h1>       { /* 因为事件绑定需要接收函数本身，作为事件处理，不能直接调用 */}       { /* 因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用 */}       <buttononClick={ ()=>{ event1(西岭,16)}}>你点啊</button>       <br/>       { /* 或者使用 bind等其方式，将函数本身作为返回值传入 */}       <buttononClick={ event1.bind(null,嬴政,999)}>你再点一下试试</button>       { /* 再次强调 JSX 就是 JS 扩展，就是JS  */}     </div>   ) } exportdefault App 

因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用，香港云服务器或者使用 bind 等其方式，将函数本身作为返回值传入。

再次强调 JSX 就是 JS 扩展，就是 JS。

事件对象传参

01 函数无传参：

事件对象默认传入，因此直接在事件处理函数中形参接收即可。

02 箭头函数传参：

因为事件对象有默认传入，而使用箭头函数时，则需要在箭头函数中传入后，再在箭头函数返回的函数中传入。

03 bind 等其方式：

将函数本身作为返回值传入，事件对象默认会添加在最后一个参数中。

无论有无参数传入，事件对象都不需要写，事件处理函数按顺序接收即可。

// 事件对象传参 const event1 =function (ev) {    console.log(ev); } functionApp() {    return (     <div>       <h1>事件绑定</h1>       { /* 01 函数无传参 */}       { /* 事件对象默认传入，因此直接在事件处理函数中形参接收即可 */}       <buttononClick={ event1}>点一下？</button>  <br/>       { /* 02 箭头函数传参       因为事件对象有默认传入，而使用箭头函数时，则需要在箭头函数中传入后       再在箭头函数返回的函数中传入 */}       <buttononClick={ (ev) => {  event1(ev,西岭,16) }}>你点啊</button><br/>       { /* 03 bind 等其方式       将函数本身作为返回值传入，事件对象默认会添加在最后一个参数中       无论有无参数传入，事件对象都不需要写，事件处理函数按顺序接收即可 */}       <buttononClick={ event1.bind(null)}>你再点一下试试</button>     </div>   ) } exportdefault App 

列表渲染

JSX 默认会对数组进行结构，因此可以直接在 JSX 中展示数组的值。

const item1 = [1,3,5] functionApp() {    return (     <div>       { /* JSX 默认会对数组进行结构 */}       <h1>{ item1}</h1>     </div>   ) } exportdefault App 

同理，如果数组元素值也是 JSX，同样可以进行直接使用。

const item1 = [1,3,5] const item2 = [   <p>item1</p>,   <p>item1</p>,   <p>item1</p> ] functionApp() {    return (     <div>       { /* JSX 默认会对数组进行结构 */}       <h1>{ item1}</h1>       { /* 数组值为 jsx 同样可以直接使用*/}       <div>         { item2}       </div>     </div>   ) } exportdefault App 

而在项目中，网站模板大部分获取到的数组元素是对象数据，要对其进行结构展示，就需要对数组进行循环操作后使用。

// 数组数据 const arr = [   {  id:1,name:痴心绝对 },   {  id:2,name:像我这样的人 },   {  id:3,name:南山南 } ] // === 数据遍历 === functionloops() {    var a2 = []   // 循环遍历数据   for (var i =0; i < arr.length; i++) {      // 将数组内容结构为JSX 数组     a2.push(<h1key={ arr[i].id}>{ arr[i].name}</h1>)   }   return a2 } functionApp() {    return (     <div>       { /* 调用遍历函数，获取 JSX 数组展示 */}       { loops()}     </div>   ) } exportdefault App 

这样的方式因为过于繁琐，并不推荐使用。

但是，基本思路是不变的，因为 JSX 可以自动结构数组结构，我们只需要将数据的数据遍历为 JSX 数据形式使用就可以了，因此，我们可以选择一种更为优雅的遍历方式map() 函数。

// 数组数据 const arr = [   {  id:1,name:绝对痴心 },   {  id:2,name:像我这样帅的人 },   {  id:3,name:南山难 } ] functionApp() {    return (     <div>       { /* map 方法遍历数组 */}       { arr.map(item=><h3>{ item.id}--{ item.name}</h3> )}     </div>   ) } exportdefault App 

样式设置

内联样式

样式需要以对象形式展示：

//声明样式对象 const styles = {    color:red,   // 样式的属性名需要处理,要么   // font-size:20px, // 直接使用报错   fontSize:30px,// 转大写 √   background-color:pink// 引号包裹 √ } functionApp (){    return (     <div>       { /* 内联样式需要以对象形式展示 */}       <h3style={ { color:"red"}}>西岭老湿</h3>       <pstyle={ styles}>真的很帅</p>     </div>   ) } exportdefault App 

外联样式

创建对应的 CSS 文件，使用模块化语法规则引入样式文件。

创建 CSS 文件 \src\App.css

body{    background-color: skyblue;   color: blue; } .box{    font-size: 30px; } 

\src\App.js

// 引入外联样式文件 import ./App.css function App (){    return (     <div>       <h3>小蓝同学</h3>       <pclassName="box">胖蓝</p>     </div>   ) } export default App

条件渲染

条件渲染就是函数调用。

import React from react import ReactDom from react-dom var f = false const fun1 = ()=>{      if(f){        return(<h1>哈哈哈哈</h1>)     }else{        return(<h2>嘿嘿</h2>)     } } const title = (   // 使用括号，可以换行，代码更加整洁   <div>     { fun1()}   </div> ) ReactDom.render(title,document.getElementById(root)) 

 【编辑推荐】

ES6新增语法—Promise详解 React vs Svelte：虚拟和真实DOM之间的战争 ES6新增语法—Async...Await详解 完整React开发视频课程 React 入门第一步：环境搭建

很赞哦!（88651）