React中Jsx的介绍

*React JSX*

*优点*

jsx执行更快

类型更安全，编译过程如果出错就不能编译

jsx编写模板更加简单快速

*JSX表达式*

由HTML元素构成

中间如果需要插入变量用{}

{}中间可以使用表达式

{}中间表达式中可以使用jsx对象

属性和html内容一样都是用{}来插入内容

JSX样式

\1. class中不可以存在多个class属性

例如：

<div className="abc" className={“bfh”}>

\2. style样式中，如果存在多个单词属性的组合，第二个单词首字母大写（驼峰命名），或者用引号括起来，否则会报错

let st={
 borderBottom:"1px solid red",
"border-left":"1px solid black"
}

\3. 多个类共存的操作

let xla="reb";
let el=(
  <div>
  <h1 className={"abc"+xla}></h1>
 </div>
);
let arr=["abc","ddfg"].join(" ");
let el2=(
  <div>
  <h1 className={arr}></h1>
 </div>
 );

\4. 注释:必须在括号的表达式内书写，否则报错

书写方式：{/*这里写注释内容 */}、

*注意：*

jsx必须要有根节点

正常的普通html元素要小写，如果大写，默认认为是组件