react学习(5)jsx语法
2022-08-08 本文已影响0人
哆啦C梦的百宝箱
知识点
1: jsx语法规则
-
定义虚拟dom时,不要写引号。
-
标签中混入
js表达式
时,需要加上{}
注意
:js表达式和js语句
1:表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如:
(1):a
(2):a+b
(3):arr.map()
(4):demo()
(5):function test(){}2:语句:控制代码走向
(1):for(){}
(2): if(){}
(3):switch(){} -
样式的类名指定要用className,不要用class,因为在es6中class是声明类的关键字。
-
内联样式,要用style={{key:value}}的形式去写。如果是两个单词的,需要写成小驼峰的形式:如fontSize
-
虚拟dom,只有一个根标签。
-
标签必须闭合。
-
标签首字母
a.如果首字母是小写,则转化为对应的html同名标签,如果html中无对应的同名标签则报错。
b.如果首字母是大写,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>react</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
const myId="Niuniu";
const myText ="hellO";
const vDOM =(
<div>
<h1 id={myId.toLocaleLowerCase()}>
<span style={{color:'red'}}>{myText.toLocaleLowerCase()}</span>
</h1>
<input type="text"/>
</div>
);
ReactDOM.render(vDOM,document.getElementById('test'));
</script>
</body>
</html>