react xml_React合集：（四）React中JSX语法介绍

React中JSX语法介绍一JSX是什么

JSX是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析。

我们使用上节代码示例：

import React, {Component} from 'react'class App extends Component{    render(){        return (            <div className='title'>                <p>你好，世界p>                <p>Hello，Wordp>            div>        )    }}export default App;

return里面就是一段简单的JSX语法格式了；

我们还可以使用js去写这段dom：

var p1 = React.createElement('p', null, '你好');var p2 = React.createElement('p', null, 'Hello Word');var div1 = React.createElement('div', { className: 'title' }, p1, p2);

从代码量上就可以看出 JSX 语法大量简化了我们的工作。 在 JSX 语法中，如果直接像使用正常 HTML 一样书写是会报错的。 比如上述代码的 className ，目的是给对应的 dom 增加样式名，但是直接写 class 会报错，需要修改为 小驼峰形式 才可以正常显示，同时相应的点击事件也是一样，这也算是一个比较重要的注意点。 运行结果如下：

‍ ‍ ‍二组件和Jsx语法的区别

自定义的组件开头必须大写，JSX开头必须小写，算是React的一种机制，也是比较重要的一个提示吧。

三JSX中使用三元运算

JSX中可以是可以使用三元运算符来进行判断处理的。

示例：

import React, {Component} from 'react'class App extends Component{    render(){        return (            <div className='title'>                <p>{true?"你好，世界":"啊哦"}p>                <p>Hello，Wordp>            div>        )    }}export default App;

该章主要目的是 对JSX语法有个简单的了解。后续过程中可以慢慢了解。 点分享 点收藏 点点赞 点在看