React入门——2.JSX简介

永寂如孤星

已于 2022-03-31 13:33:58 修改

阅读量409

点赞数

于 2022-03-25 06:46:01 首次发布

本文链接：https://blog.youkuaiyun.com/yjrguxing/article/details/123726221

版权

本文介绍了React中的JSX语法，包括JSX的基本用法、如何在JSX中使用表达式、JSX作为表达式的应用、JSX属性的设置、JSX子元素的处理以及JSX如何帮助防止注入攻击等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们假定你已经学习了前面的内容
在上一节中我们在网页上显示了HelloWorld，但是有没有人发现，我们的<div>Hello World</div>并不是在html文件，而是在js文件中呢？
这就是我们写的第一个JSX标签，没错<div>Hello World</div>既不是普通的字符串，也不是html标签，他是React发明的一个Javascript语法拓展，可以帮助我们更好的描述UI应该呈现出的它应有的交互的本质形式，同时它具有Javascript的全部功能。

现如今基本所有的React应用都会使用JSX标签语法来加速项目构建

React入门——3.元素渲染

在JSX中可以使用表达式

在JSX的大括号{}中我们可以使用Javascript的变量、方法及表达式，比如我们可以将index.js中的代码修改为

const name = '张三'
ReactDOM.render(
    <div>
        今天是{new Date().toLocaleDateString()}
        在这一天{name}计算出了1+1={1+1}
    </div>,
  document.getElementById('root')
);

JSX也是一个表达式

在index.js中添加以下代码，可以在网页的控制台看到相应内容，也就是说JSX本身也是一个表达式，你可以将其赋值给变量，把JSX当作参数传入，从函数中返回JSX，也可以在if、for中使用JSX

function test(){
    return (<div>123</div>)
}
function check(jsx){
    if(jsx.type == 'div'){
        console.log('jsx标签相同，被检测jsx已返回')
        return jsx
    } else {
        console.log('内容有误，被检测jsx已返回')
        return jsx
    }
}
console.log(check(test()))

JSX属性

JSX标签拥有大部分html标签的属性，例如img的src、div的tabindex等
当然，属性的值也可以是表达式

const baidu = 'http://www.baidu.com'
ReactDOM.render(
    <div>
        <a href={baidu }>baidu</a>
    </div>,
  document.getElementById('root')
);

同时需要注意，属性的值不能同时使用‘’和{}，并且JSX标签的属性使用小驼峰命名法，例如class变为了className，tabindex变为了tabIndex

JSX子元素

JSX里同样可以有很多子元素

ReactDOM.render(
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>,
  document.getElementById('root')
);

需要注意的是，在JSX标签的最外围必须要有且只能有一个父标签，大部分时候我们会以<div>来做最外围的父标签，不过这会导致组件增多时<div>标签过多，所以你可以使用<Fragment></Fragment>标签来做父标签，他会直接被忽略掉，这需要引入

import { Fragment } from 'react';

JSX防止注入攻击

React DOM模块在渲染所有输入内容之前，会默认进行转义，所以你的应用中永远不会注入那些并非你明确编写的内容，这可以有效防止XSS跨站脚本攻击

参考文件

JSX简介 - React
最后更新于2022年3月25日
原创不易，如果该文章对你有所帮助，望左上角点击关注~如有任何技术相关问题，可通过评论联系我讨论,我会在力所能及之内进行相应回复以及开单章解决该问题.

该文章如有任何错误请在评论中指出，感激不尽，转载请附出处！
个人博客首页：https://blog.youkuaiyun.com/yjrguxing ——您的每个关注和评论都对我意义重大