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;

 

JSX简介

上一篇:前端表格(Table)多条数据可以增加行删除行json封装后Post数据到后台处理


下一篇:识别动态验证码--web自动化测试