jsx语法规则：

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。

3.样式的类名指定不要用class，要用className。

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.hello {width: 200px;height: 200px;background-color: rgb(231, 244, 250);line-height: 200px;text-align: center;}
</style><body><div id="hello"></div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel"> /* 此处一定要写babel */const name = "张三";const old=18;//1.创建虚拟DOMconst VDOM = <div className="hello">我叫{name},今年{old}岁！</div> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('hello'))
</script></html>

二、通过数组建立虚拟dom

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.hello {width: 200px;height: 200px;background-color: rgb(231, 244, 250);/* line-height: 200px; */text-align: center;overflow: hidden;}
</style><body><div id="hello"></div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel"> /* 此处一定要写babel */const info = ["张三", 18, "男"];//1.创建虚拟DOMconst VDOM = (<div className="hello"><h3>学生信息</h3>{info.map((item)=>{return <div style={{fontSize:'18px',height:"30px"}}> {item}</div>})}</div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('hello'))
</script></html>

【React】通过jsx语法创建虚拟DOM动态及数组赋值的方法（图文+代码）相关推荐

React系列--jsx语法及虚拟dom，渲染
1. 虚拟dom:其实感觉就跟dom是一样的,只不过是写在js的结构中,而不是写在html结构中. 此时需要babel去解析,遇到<认为是html,遇到{}认为是js变量. <script ...
react之使用js创建虚拟DOM
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM
1_使用jsx创建虚拟DOM <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
前端React教程第六课虚拟DOM
09 真正理解虚拟 DOM:React 选它,真的是为了性能吗? 在过去的十年里,前端技术日新月异.从最早的纯静态页面,到 jQuery 一统江湖,再到近几年大火的 MVVM 框架--研发模式升级这件 ...
深入浅出React（四）：虚拟DOM Diff算法解析
React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法.这让我们可以无需担心性能问题而"毫无顾忌"的随时"刷新"整个页面,由虚拟DOM来确保只对界面 ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
react 中 JSX 语法的转化过程
JSX 语法的转化过程 JSX 仅仅是 createElement() 方法的语法糖(简化语法) JSX 语法被 @babel/preset-react插件编译为 createElement() 方 ...
React中jsx语法规则
1.定义虚拟DOM不要写引号,因为不是字符串 const VDOM1 = <h1>Hello,React</h1> const VDOM2 = ( /* 此处一定不要写引号,因 ...

【React】通过jsx语法创建虚拟DOM动态及数组赋值的方法（图文+代码）

二、通过数组建立虚拟dom

【React】通过jsx语法创建虚拟DOM动态及数组赋值的方法（图文+代码）相关推荐

最新文章

热门文章