P06:React中JSX语法简介
目录
上篇文章已经接触到了 JSX 语法,看起来跟html
标签几乎一样,事实也是如此。JSX 语法确实也有很多需要注意的事项,但是对于初学者学太多反而不好。所以本文我们作一个最简单的 JSX 语法介绍。
JSX 简介
JSX 就是 Javascript 和 XML 结合的一种格式。React 发明了 JSX,可以方便的利用 HTML 语法来创建虚拟 DOM,当遇到
<
,JSX 就当作 HTML 解析,遇到{
就当 JavaScript 解析.
比如我们写一段 JSX 语法:
<ul className="my-list"> <li>mybj123.com</li> <li>I love React</li> </ul>
比如我们以前写一段代码 JS 代码:
var child1 = React.createElement('li', null, 'mybj123.com'); var child2 = React.createElement('li', null, 'I love React'); var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
从代码量上就可以看出 JSX 语法大量简化了我们的工作。
组件和普通 JSX 语法区别
这个说起来也只有简单的一句话,就是你自定义的组件必须首写字母要进行大写,而 JSX 是小写字母开头的。
这个也算是一个比较重要的知识点吧。
JSX 中使用三元运算符
在 JSX 中也是可以使用 js 语法的,本文我们先简单讲解一个三元元算符的方法,见到了解一下。
import React from 'react' const Component = React.Component class App extends Component{ render(){ return ( <ul className="my-list"> <li>{false?'mybj123.com':'技术胖'}</li> <li>I love React</li> </ul> ) } } export default App;
总结
通过本文的简单学习,小伙伴们一定对 JSX 语法有个简单的了解,其实作为一个初学者,我们先知道这么多就足够了。随着教程以后我们会继续深入讲解。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06:React中JSX语法简介
码云笔记 » P06:React中JSX语法简介