React学习之JSX

什么是JSX?

简单点说,JSX是对javascript的扩展,语法类似于XML,但JSX不是一门新的语言,
确切来说只是语法糖,每一个XML都会被响应的转换工具转换成纯的javascript代码。
在使用React时,你没有必要使用JSX来构建组件,但是推荐使用JSX,因为这样可以让组件的结构
和组件之间的关系看起来更清晰。

好了,开始使用JSX吧!

首先我们分别使用JSX和纯js来渲染一个组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 使用JSX
ReactDOM.render(
<div>
<h2>使用了JSX语法糖</h2>
</div>,
document.body
)
// 不使用jsx
ReactDOM.render(
React.createElement('div', null,
React.createElement('h1', null, '不使用jsx')
),
document.body
)

html标签和React组件

ReactDOM.render()可以渲染html标签,也可以渲染React组件,但是这里有一些命名上的规范

html标签使用首字母小写的方式,但使用首字母大写也能够正常加载

1
2
var renderDiv = <div>这是一个标签</div>
ReactDOM.render(renderDiv, document.body)

React组件使用首字母大写的方式

1
2
3
4
5
6
var RenderComp = React.createClass({
render: function(){
return: <div>这是一个组件</div>
}
});
ReactDOM.render(<RenderComp />, document.body)

经过测试,发现如果使用首字母小写的方式,将不会正常渲染组件,也不会报错, 当然你也可以这样写:

1
2
3
4
5
6
7
var RenderComp = React.createClass({
render: function(){
return: <div>这是一个组件</div>
}
});
var renderComp = <RenderComp />
ReactDOM.render(renderComp, document.body)

js表达式

当我们想要在React中使用js变量或者是表达式时候,使用{}来进行包裹,不能够出现””,否则会被当作字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var SampleComp = React.createClass({
getInitialState: function(){
return {
iscls: false;
}
},
render: function(){
return (
// 表达式
<div className={this.state.iscls ? 'cls' : 'no_cls'}>
// 变量
<h2>{this.props.msg}</h2>
</div>
)
}
});
ReactDOM.render(<SampleComp msg='学习搬砖中...' />, document.body)

这里提示一下,在JSX中,标签的class和for属性分别使用className和htmlFor代替了

其它

在给标签添加style属性的时候,应该这样写:

1
style={{display: 'none'}}

也可以把要应用的样式赋值给一个变量,再使用变量

1
2
3
4
5
var style = {
color: red,
display: none
};
<div style={style}></div>

HTML转义,为了防止XSS攻击,React默认是使用转义的,所以当你想使用一些富文本这里就必须注意
为了不让其转义,我们可以这样写:

1
2
3
4
5
6
var mesg = '<h2>这里的字体大小是多少?</h2>'
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: mesg}}>
</div>,
document.body
)

总结

刚开始学习React的时候对JSX是生畏的,以为会很难理解。当慢慢的接触React,踩过一些小坑,
发现使用JSX是那么好掌握, 它仅仅是语法糖而已,并且转换的规则也很简单

分享到 评论