JSX简介

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

JSX语法

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>

JS代码

var child1 = React.createElement('li', null, 'JSPang.com');
var child2 = React.createElement('li', null, 'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

组件和JSX语法的区别:自定义的组件必须首写字母要进行大写,而JSX是小写字母开头的。

JSX中使用三元运算符

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        Hello JSPang
        <ul className="my-list">
          <li>{false ? 'JSPang.com' : '技术胖'}</li>
          <li>I love React</li>
        </ul>
      </div>
    );
  }
}
export default App;

 

posted @ 2020-06-23 11:12  聂小恶  阅读(504)  评论(0编辑  收藏  举报