首页 > Web开发 > 详细

JSX简介

时间:2020-06-23 11:39:06      阅读:72      评论:0      收藏:0      [点我收藏+]

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简介

原文:https://www.cnblogs.com/em2464/p/13181035.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!