jsx语法
jsx语法
jsx语法规则
语法规则:
jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
?
重点:
-
引入js变量时使用{变量名},还可以用于js表达式,但不能有逻辑性语句(例如for if)
const myId = ‘aTgUiGu‘ const myData = ‘HeLlo,rEaCt‘ const VDOM=(
{myData}
) -
jsx中样式类名不是class,是className
-
jsx中内联样式不能直接“ ”指定,要用{{样式键值对}}
{myData.toLowerCase()}
-
虚拟dom只有一个根标签
错误实例:
const VDOM = (
{myData.toLowerCase()}
//error error error ) -
标签首字母--小写,找html同名元素 --大写,渲染react组件
-
不能遍历对象,遍历产生html标签时,要指定唯一key给虚拟dom
-
{
data.map((item,index)=>{
return
- {item} }) }
原文:https://www.cnblogs.com/rabbithacker/p/jsx.html