注释方式

ReactDOM.render(
<div>
{/*JSX 中的注释方式*/}
</div>,
document.getElementById('root')
)

jsx语法中只能有一个顶级标签(元素),如下写法是错误的,这和react的diff算法相关

ReactDOM.render(
<div>
</div>
<p></p>,
document.getElementById('root')
)

JSX中所有的标签都必须有闭标签

ReactDOM.render(
<div>
<input type="text" />
<img src="" />
</div>,
document.getElementById('root')
)

使用组件时,首字母必须大写

... ...
import Banner from ./Banner ReactDOM.render(
<div>
<Banner />
</div>,
document.getElementById('root')
)

在JSX中我们通常是通过 {} 的方式插入值,但是设置style属性需要{{ }},

并且遇到-分割的属性时,使用小驼峰的写法,如:text-align

ReactDOM.render(
<div style={{background:red;}}>
{ 1+2 }
<div style={{ padding: 30, textAlign: 'center' }}>
456
</div>      
</div>,
document.getElementById('root')
)

html标签上的属性名

因为jsx最终要转成js进行编译,因此html标签上的属性名与JavaScript关键字和保留字相冲突的都需要做一些变化,其规则同js中操作dom属性时一样:

一般来说,在使用js操作标签属性时,若出现与JavaScript关键字和保留字相冲突的情况,除html标签class(转为className)以外的属性,在属性前加上小写的html即可,如

html标签的class在jsx语法中变为 className,html标签的for属性(如:<label for="msg" ></label>)在jsx中变为<label htmlFor="msg" ></label>,

ReactDOM.render(
<div className="tips">
<label htmlFor="name" ></label>
</div>,
document.getElementById('root')
)

调用.css 文件中的css属性

... ...
import classes form './myCss.css' ReactDOM.render(
<div className={classes['mycss']}> </div>,
document.getElementById('root')
)

事件必须修正this指针,且绑定事件名时要使用小驼峰的写法

constructor{
this.fun = this.fun.bind(this)
}
//或
onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}

react 的JSX语法需要注意哪些点?的更多相关文章

  1. 前端笔记之React(一)初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  2. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  3. react的jsx语法

    在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...

  4. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  5. React之jsx语法特性

    jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...

  6. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

  7. 3.react 基础 - JSX 语法

    1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...

  8. React的jsx语法,详细介绍和使用方法!

    jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...

  9. React的JSX语法及组件

    最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...

随机推荐

  1. 动态sql防止报错的写法 当判断语句都是null时候会报错 需要手动添加一个判断语句 一般id都会存在

  2. TCP 协议连接与关闭的握手

     原文链接 http://blog.csdn.net/oney139/article/details/8103223   TCP头部: 其中 ACK   SYN  序号  这三个部分在以下会用到,它们 ...

  3. 使用doxygen静态分析开源代码

    doxygen是一款生成开源代码说明文件的工具,因为不需要编译源码,用作代码的分析也十分方便. 一.安装 sudo apt-get install graphviz sudo apt-get inst ...

  4. Python基础学习(三)

    了解了Python的基础使用,接下来继续练手廖雪峰老师的教学案例. 一.变量可以指向函数 说明,一个函数可以赋值给一个变量,该变量就会具有该函数的功能,举例: gg = abs print( gg(- ...

  5. jdk1.8.0_45源码解读——HashSet的实现

    jdk1.8.0_45源码解读——HashSet的实现 一.HashSet概述 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.主要具有以下的特点: 不保证set的迭代顺 ...

  6. Sublime Text 之运行 js 方法[2015-5-6更新mac下执行js]

    昨天说完<Sublime Text 2 绿化与汉化 [Windows篇]>,今天我们来说说怎么用st直接运行 js 吧.群里的小伙伴一直对我的 ST 能直接运行js感到非常好奇,今天我就公 ...

  7. MyCat分库分表入门

    1.分区 对业务透明,分区只不过把存放数据的文件分成了许多小块,例如mysql中的一张表对应三个文件.MYD,MYI,frm. 根据一定的规则把数据文件(MYD)和索引文件(MYI)进行了分割,分区后 ...

  8. object-c 数学计算公式

    1. 三角函数  double sin (double);正弦  double cos (double);余弦  double tan (double);正切  2 .反三角函数  double as ...

  9. MacOS 下提示APP 损坏 无法安装 解决方法

    sudo spctl --master-disable

  10. SquishIt引起的HTTP Error 500.0 - Internal Server Error

    将一个ASP.NET项目从.NET Framework 4.0升级至.NET Framework 4.5之后,访问时出现HTTP Error 500.0 - Internal Server Error ...