【React】React JSX

已于 2022-04-24 09:51:11 修改
阅读量281 收藏
点赞数
分类专栏： JavaScript库 # React 文章标签： react.js javascript html5
于 2021-10-18 20:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46658751/article/details/120832705
版权

文章目录

JSX介绍

  • JSX其实就是JavaScript XML的缩写， 直译过来就是基于JavaScript的XML。
  • JSX 作为一种JavaScript语法扩展，支持自定义属性，并具有很强的扩展性。
  • JSX是React框架内置的语法， 且专用于React应用开发， 因此建议设计人员使用JSX方式来实现UI中的虚拟DOM。

通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM。

若要在React项目中使用JSX语法， 则必须引用“babel.js”来解析JSX，且在<script>标签中必须改用“type=“text/ babel””属性。

原因： 在使用“type=“text/babel””属性替换“type="text/javascript”属性后， 浏览器内置的JavaScript解释器就不会解析

JSX是一种像下面这样的语法：
const element = <h1>Hello, world!</h1>;

它是一种JavaScript语法扩展。
在React中可以方便地用来描述UI。

本质上，JSX为我们提供了创建React元素方法：
React.createElement()
上面的代码实质上等价于：
var element = React.createElement(
  "h1",
  null,
  "Hello, world!"
);

JSX语法规则

  • 标签中混入JS表达式时要用{}
  • 样式的类名指定不要用class,要用className
  • 内联样式,要用style= {{key:value}}的形式去写
  • 只要一个根标签
  • 标签必须闭合
  • 标签首字母：
    • 若小写字母开头，将该标签转为html中同名标签，若html’中无该标签对应的同名元素，则报错。
    • 若大写字母开头，react就去渲染对应的组件，若组件未定义，则报错。

JSX的一般语法形式

const element = (
	<tag-level-1>
		<tag-level-2></tag-level-2>
	</tag-level-1>
)

JSX的引用

  1. JSX在页面中直接定义
  2. 引入外部定义好的JSX独立文件来实现
import.js文件：

//先获取实际的dom
 const reactDiv = document.querySelector('#app');
//使用JSX语法创建虚拟的DOM
  const reactSpan = (
          <span>
              <h3>React JSX</h3>
              <p>JavaScript XML语法</p>
          </span>
  )
  //进行渲染
  ReactDOM.render(reactSpan,reactDiv)

进行引用：

<body>
    <div id="div-react"></div>
    <script type="text/babel" src="../js/import.js"></script>
</body>

JSX算术表达式

在React JSX中使用JavaScript表达式要使用大括号{ }括起来

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');

        const reactSpan = (
            <span>
                <h3>JSX算术表达式：</h3>
                <p>3+6 = {3+6}</p>
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX条件表达式

在React JSX中使用JavaScript表达式无法使用if条件语句，但是可以使用条件运算符构成
条件表达式来替代if条件语句

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');

        const reactSpan = (
            <span>
                <h3>JSX条件表达式：</h3>
                <p>测试表达式："1===1",return: { 1===1 ? 'true' : 'false'}</p>
                <p>测试表达式："1!==1",return: { 1!==1 ? 'true' : 'false'}</p>
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX嵌入表达式

先定义一个变量，可以通过在JSX中引用该变量的方式使用该变量

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const name = '曹操';

        const reactSpan = (
            <span>
                <h3>JSX嵌入表达式：</h3>
                <p>用户姓名：{name}</p>
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX对象表达式

JSX可以直接使用对象表达式，即完全支持obj.property的表达式形式

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const userinfo = {
            name: '曹操',
            gender: '男'
        }

        const reactSpan = (
            <span>
                <h3>JSX对象表达式：</h3>
                <p>用户姓名：{userinfo.name}</p>
                <p>用户性别：{userinfo.gender}</p>
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX函数表达式

JSX可以直接调用JavaScript函数，即函数表达式

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const userinfo = {
            name: '曹操',
            gender: '男'
        }

        function showUserInfo(user) {
            return '姓名：'+user.name+",性别："+user.gender;
        }
        
        const reactSpan = (
            <span>
                <h3>JSX函数表达式：</h3>
                <p>{ showUserInfo(userinfo) }</p>                
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX增强函数表达式

JSX中无法直接使用if条件语句。但可以通过函数表达式以变通的方式来使用，因为JSX可以作为参数传入并嵌套在另一个JSX中

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const userinfo = {
            name: '曹操',
            gender: '男'
        }

        function showUserInfo(user) {
            return '姓名：'+user.name+",性别："+user.gender;
        }
        
        function chooseUserInfo(user) {
            if(user) {
                return showUserInfo(user);
            }else{
                return '用户信息为空'
            }
        }
        
        const reactSpan = (
            <span>
                <h3>JSX增强函数表达式：</h3>
                <p>{ chooseUserInfo(userinfo) }</p> 
                <p>{ chooseUserInfo() }</p>               
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX数组表达式

<body>      
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        //定义数组
        const arr = [
            <p>姓名：刘备</p>,
            <p>性别：男</p>
        ]
    
        const reactSpan = (
            <span>
                <h3>JSX数组表达式：</h3>
                <p>{ arr }</p>                           
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX样式表达式

<body>
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const css1 = {
            fontSize: 20,
            fontStyle: 'bold',
            color: 'red'
        };

        const css2 = {
            fontSize: 12,
            fontStyle: 'italic',
            color: 'green'
        };
        
        const reactSpan = (
            <span>
                <h3>JSX样式表达式：</h3>
                <p style = { css1 }>南栀</p>
                <p style = { css2 }>南栀</p>                
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX注释表达式

React中注释内容也需要放在大括号”{ }”之中使用，否则注释的内容就会在页面上显示出来

<body>
    <div id="div-react"></div>

    <script type="text/babel">
        var divReact = document.getElementById('div-react');
        
        const reactSpan = (
            <span>
                <h3>JSX注释表达式：</h3>
                { /* 我是注释,放在大括号中,不在页面上显示 */}
                /* 没有放在大括号中，展示在页面上 */            
            </span>
        )

        ReactDOM.render(reactSpan,divReact);   
    </script>
</body>

在这里插入图片描述

JSX防止注入攻击

你可以安全地在 JSX 当中插入用户输入内容：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有输入内容之前，默认会进行转义。
它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。
所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

南栀~zmt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React框架-JSX语法
weixin_48852584的博客
10-17 182
文章目录前言一、你如何理解JSX？1、JSX是对象2、JSX是变量3、JSX可以嵌套4、jsx可以防注入攻击二、JSX注释方式1、单行注释2、多行注释 前言 JSX是一个 JavaScript 的语法扩展，是javascript XML语法糖。官方建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。 JSX 可以生成 React “元素”。 一、你如何理解JSX？ 1、JSX是
React 之 JSX
z1617433467的博客
07-19 963
万物始于 jsx，想要深入学习 react ，就应该从 jsx 入手。弄清楚 jsx ，方便学习掌握以下内容： 了解常用的元素会被 React 处理成什么，有利于后续理解 react fiber 类型； 理解 jsx 的编译过程，方便操纵 children、控制 React 渲染，有利于便捷使用 React 插槽组件。......
React--JSX
beLaity的博客
12-24 226
JSX的本质是什么？和js之间的关系？ JSX是JavaScript的一种语法的扩展，它和模板语言很接近， 但是它充分具备JavaScript的能力 为什么要用JSX？不用什么后果？ jsx语法如何在js生效 —> Babel Facebook公司的定位是JavaScript的“扩展”，决定了浏览器不会像支持js一样地支持jsx JSX背后的功能模块是什么？这个功能模块都做了哪些事情？ createElement相当于数据处理层 总结： 1.React.createEleme..
React-JSX
weixin_43760969的博客
11-28 73
JSX 优点： JSX执行更快，编译为jasvascript速度更快，进行了优化 类型更安全，编译过程如果出错就不能编译，及时发现错误 JSX编写模板更加简单快捷 注意： JSX必须要有唯一的根节点 正常的html元素要小写，大写默认为组件 JSX表达式{} 由html元素构成 中间如果需要插入变量使用{} {}可以使用表达式 {}中间表达式中可以使用JSX元素 属性和html内容一样都是用{}来插入内容 JSX表达式 最基本的+运算 import React from 'reac
react jsx中样式渲染
01-07
import React from 'react'; import ReactDOM from 'react-dom'; const title = { color:'red' } const songs = [ {id:1,name:'赤西虐对1'}, {id:2,name:'赤西虐对2'}, {id:3,name:'赤西虐对3'}, ] // key的作用...
React JSX语法使用案例
04-21
React JSX语法使用案例，使用前需要 cnpm install 安装组件
React JSX
12-14
React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。...
React学习之JSX与react事件实例分析
10-15
本文将深入探讨JSX和React事件的相关知识。 1. JSX表达式： 在React中，JSX被用来创建React元素。JSX表达式可以包含JavaScript代码，这些代码需包裹在大括号`{}`内。例如，我们可以创建一个包含用户信息的元素： ...
react antd项目框架 jsx版本
02-21
react项目框架 jsx版本 1、解压 2、安装npm，npm install 3、运行 npm run start
React基础--JSX
weixin_58416189的博客
08-22 196
react基础-JSX （自我学习总结）
React--JSX 简介
神经佳的博客
02-01 240
简要介绍一下JSX语法，和条件渲染和列表渲染
React框架简介（JSX语法、组件、虚拟DOM渲染）
星河梦~的博客
11-15 2468
目录React框架为什么要学习ReactReact特点React核心JSX语法语法详解React开发过程实际DOM虚拟DOM函数组件类组件虚拟DOM渲染过程 React框架 React是一个JS库，可以简化可视化界面的开发，由Facebook在2013年发布。 为什么要学习React 那么为什么要学习React呢？ 这要先从原生js的痛点出发，原生JS的痛点在于： 用DOM的API去操作DOM，过程十分繁琐，且效率低 用js直接操作DOM，浏览器会进行大量的回流和重绘 原生JS没有组件化，代码复用率低
React-JSX的简单注意事项
qq_34975445的博客
04-07 210
React使用JSX代替常规JavaScript进行模板化。不必要使用它，但是，下面是一些附带的优点。 它更快，因为它在将代码编译为JavaScript时执行优化。 它也是类型安全的，大多数错误都可以在编译期间捕获。 如果您熟悉HTML，则可以更轻松快捷地编写模板。 使用JSX 在大多数情况下，JSX看起来像常规HTML。查看App.jsx中返回div的代码。 ...
react和react jsx基础
ohyeahhhh的博客
09-13 1649
本文是个人学习笔记，例子都是来自React Native官网。之前不是做前端的，没有使用过react，要学习react native做混合开发，react，包括react jsx还是得补补。react和react jsxreact是一个js库。有很多可以用的方法，react jsx是对javascript进行封装，提供一种类似于xml格式的语句，跟html也类似，使得在js中创建、修改元素，建立元素
【react框架】体验第一个react例子，认识并学会写JSX
庞囧的博客
07-03 408
没react介绍，懒得记哈哈。如果会vue，学起来难度就减少一些。知识点的学习来源于B站尚硅谷的系列教学视频，已投币哈哈，后面文章的记录就不再提及了。以下用原生以cdn的方式引入react在线js文件，这样立马就能体验到react。JavaScript XML，react定义的一种类似于XML的JS扩展语法，JS + XML本质是方法的语法糖。XML：简单来讲就是一种用于存储和传输数据的格式，很像html，因为格式中有很多浪费空间的写法，于是后来有了JSON格式。XML现在还有使用需求。
React系列--JSX到底是什么东西
橘导的博客
11-26 1178
JSX 简介 JSX的全称是 Javascript and XML，React发明了JSX，它是一种可以在JS中编写XML的语言。 JSX更像一种模板，类似于Vue中的 template。 为什么使用JSX？ React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。 React不强制要求使用JSX。 如何使用JSX 在JSX中使用表达式 在JSX中变量和表达式放在大括号{}中。 const
React之JSX语法
weixin_34025151的博客
09-04 74
1. JSX的介绍   JSX(JavaScriptXML)——一种在React组件内部构建标签的类XML语法。react在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。 基于ECMAScript的一种新特性 一种定义带属性树结构的语法   JSX的特性：   它具备以下好处： 更加熟悉 更加语义化 ...
React----JSX
m0_48375854的博客
02-22 251
JSX一、JSX 的基本使用1、使用步骤2、为什么脚手架中可以使用 JSX 语法？二、JSX 中使用 JavaScript 表达式三、JSX 的条件渲染四、JSX 的列表渲染五、JSX 的样式处理1、行内样式 —— style2、类名 —— className 一、JSX 的基本使用 React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScr
react jsx写法
最新发布
08-28
以下是 React JSX 的常见写法： 1. 使用标签表示元素：可以使用标签来表示 React 元素，例如 `<div>` 表示一个 `<div>` 元素。 ```jsx <div>Hello World! ``` 2. 使用花括号插入 JavaScript 表达式：可以在标签内...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南栀~zmt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值