React入门之react_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><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root1"></div><script type="text/babel">//es6方法创建,jsx简单写法/** jsx语法* jsx是js语法扩展,可以嵌套表达式,在编译之后jsx表达式会被转为普通的js函数调佣,并且对其取值后得到js对象* jsx特定属性:可以使用引号讲属性值指定为字符串字面量,也可以用大括号来给属性中插入一个表达式* */let name='fxt'let flag=truelet id='hello'let root2=document.getElementById('root1')let div= <div className='hello'><h1 id={id}>hello {name}</h1><p>{name}</p><p>{flag? 'hello':'world'}</p></div>ReactDOM.render(div,root2)// ReactDOM在渲染所有内容之前,默认会惊醒转义,他可以确保我们的应用永远不会被注入那些并不是我们自己编写的代码   // 所有内容在渲染之前都被转换成了字符串,这样可以有效的防止我们的xss(cross0site-scripting,跨站脚本)攻击</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/498038.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【appium】Hybrid应用自动化|微信小程序自动化

目录 一、Hybrid&#xff08;nativewebview&#xff09;应用自动化 1、webview 2、Hybrid应用自动化实现 2.1准备工作 Step1&#xff1a;准备android 4.4版本以上的手机/模拟器 Step2&#xff1a;在app源码中将webview调试模式打开 Step3&#xff1a;安装UC开发者工具 U…

密码学在 Web3 钱包中的应用:私钥是什么?bitget钱包为例

在非对称加密演算法中&#xff0c;私钥是一串随机生成的数字&#xff0c;通常以十六进制数表示&#xff08;也就是由0、1、2、3、4、5、6、7、8、9、a、b、c、d、e和f组成&#xff09;。私钥生成后&#xff0c;这串数字被作为一个单向数学函数中的输入值&#xff0c;计算产生的…

前端css、js、bootstrap、vue2.x、ajax查漏补缺(1)

学到的总是忘&#xff0c;遇到了就随手过来补一下 1.【JS】innerHTML innerHTML属性允许更改HTML元素的内容可以解析HTML标签 2.【CSS】display: none 设置元素不可见&#xff0c;不占空间&#xff0c;约等于将元素删除一样&#xff0c;只是源代码还存在 3.【CSS】行内样式 4.【…

每日一题——LeetCode1556.千位分隔符

方法一 个人方法&#xff1a; 把n转为字符串&#xff0c;逆序遍历n&#xff0c;把n的每个元素加入res&#xff0c;每三次加入.&#xff0c;最后将res翻转再转为字符串即为符合题目要求的结果 var thousandSeparator function(n) {nlet res[],lenn.length-1for(let ilen;i>…

C语言----联合体

不知道大家是否听说过联合体这个名词。但其实大家不用觉得联合体有多特殊&#xff0c;大家可以想象结构体是一栋楼&#xff0c;里面有很多房间&#xff0c;住了形形色色的住户&#xff08;不用或者相同的数据&#xff09;。但联合体只有一个房间&#xff0c;所有的住户都挤在这…

lv21 QT对话框3

1 内置对话框 标准对话框样式 内置对话框基类 QColorDialog, QErrorMessage QFileDialog QFontDialog QInputDialog QMessageBox QProgressDialogQDialog Class帮助文档 示例&#xff1a;各按钮激发对话框实现基类提供的各效果 第一步&#xff1a;实现组件布局&…

通过elementUI学习vue

<template><el-radio v-model"radio" label"1">备选项</el-radio><el-radio v-model"radio" label"2">备选项</el-radio> </template><script>export default {data () {return {radio: 1}…

spring boot整合cache使用memcached

之前讲了 spring boot 整合 cache 做 simple redis Ehcache 三种工具的缓存 上文 windows系统下载安装 memcached 我们装了memcached 但spring boot没有将它的整合纳入进来 那么 我们就要自己来处理客户端 java历史上 有过三种客户端 那么 我们用肯定是用最好的 Xmemcached …

mongo之常用数据库操作

目录 一、准备环境 二、日常记录及执行示范 连接数据库查询版本查询表总数模糊查询(使用正则)查询文档中数据条数排序大于等于查询有哪些库时间查询不在条件内的查询复制数据更新字段名称删除数据库 四、高阶查询 五、备份迁移数据库 总结 一、准备环境 借鉴&#xff1a;…

Vue的生命周期函数

今天我们来讲一讲Vue中的生命周期函数 每个Vue实例在其生命周期中都会经历多个关键阶段&#xff0c;这些阶段包括数据监听设置、模板编译、实例DOM挂载以及数据变化时的DOM更新等。同时&#xff0c;Vue提供了一系列生命周期钩子函数&#xff0c;允许开发者在这些重要阶段插入自…

leetcode:135.分发糖果

解题思路&#xff1a;分发糖果时&#xff0c;既要考虑左面&#xff0c;又要考虑右面&#xff0c;如果同时考虑&#xff0c;就会顾此失彼&#xff0c;所以我们可以先考虑右边&#xff0c;再考虑左边&#xff0c;分别正序、逆序进行遍历。逆序遍历时相当于重置candy数组。 运用贪…

Python + Google AI 自动修复 Sonar Bug 实践

前言 在工作中总会遇到种种不期而至的需求&#xff0c;比如前段时间突然要修复所有 Sonar Bug&#xff0c;涉及各种琐碎的代码风格问题&#xff0c;包括但不限于语法不规范、废弃注释等问题。这些项目都已经持续开发几年了&#xff0c;Sonar 上的问题层出不穷&#xff0c;各种…