初识React(2)：什么是JSX？

2023年8月25日 205次阅读 来源: hope93

媒介

在react中，我们的页面内容就是经由过程JSX来编写，那末JSX究竟是什么呢？JSX实在就是JavaScript对象，会构建建立一个js对象来形貌HTML构造的信息。这里要记着JSX是js的一种扩大言语，相似HTML然则又不是HTML，由于JSX中还能举行运算，推断，到场一些js言语等。

JSX中的运算

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

在JSX中是用 {} 来辨别是HTML照样js的，也就是说，一切的js言语都得用 {} 括起来

JSX中的变量

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

JSX中的款式

在JSX中,给元素增加款式也是用style属性，然则style内里放的是一个款式对象，以下所示：

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: 'red'}}>色彩</div>
            <div style={newStyle}>款式</div>
        </div>
      )
    }

经由过程上述案例，我们能够晓得JSX中，款式的属性称号得用驼峰定名

JSX中的HTML标签

在JSX中，有些标签称号为了防备争执得做一些转换：

  1. class得用className替代
  2. lable元素中的for属性，得用htmlFor替代，以下：
<label htmlFor="msg" ></label>

这里还要注重，JSX中的一切标签必须得是闭标签

    原文作者：hope93
    原文地址: https://segmentfault.com/a/1190000016046960
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞