什么是JSX?
简单点说,JSX是对javascript的扩展,语法类似于XML,但JSX不是一门新的语言,
确切来说只是语法糖,每一个XML都会被响应的转换工具转换成纯的javascript代码。
在使用React时,你没有必要使用JSX来构建组件,但是推荐使用JSX,因为这样可以让组件的结构
和组件之间的关系看起来更清晰。
好了,开始使用JSX吧!
首先我们分别使用JSX和纯js来渲染一个组件
1 |
|
html标签和React组件
ReactDOM.render()可以渲染html标签,也可以渲染React组件,但是这里有一些命名上的规范
html标签使用首字母小写的方式,但使用首字母大写也能够正常加载
1 | var renderDiv = <div>这是一个标签</div> |
React组件使用首字母大写的方式
1 | var RenderComp = React.createClass({ |
经过测试,发现如果使用首字母小写的方式,将不会正常渲染组件,也不会报错, 当然你也可以这样写:
1 | var RenderComp = React.createClass({ |
js表达式
当我们想要在React中使用js变量或者是表达式时候,使用{}来进行包裹,不能够出现””,否则会被当作字符串。
1 | var SampleComp = React.createClass({ |
这里提示一下,在JSX中,标签的class和for属性分别使用className和htmlFor代替了
其它
在给标签添加style属性的时候,应该这样写:
1 | style={{display: 'none'}} |
也可以把要应用的样式赋值给一个变量,再使用变量
1 | var style = { |
HTML转义,为了防止XSS攻击,React默认是使用转义的,所以当你想使用一些富文本这里就必须注意
为了不让其转义,我们可以这样写:
1 | var mesg = '<h2>这里的字体大小是多少?</h2>' |
总结
刚开始学习React的时候对JSX是生畏的,以为会很难理解。当慢慢的接触React,踩过一些小坑,
发现使用JSX是那么好掌握, 它仅仅是语法糖而已,并且转换的规则也很简单