前端框架_React

時間 2019-12-04

標籤前端框架 react 欄目 React 简体版

原文原文鏈接

JSX

JavaScript 和 XML 結合的一種語法， 最終經過 轉化工具 將 JSX 轉化成 JS
推薦在 React 中使用 JSX 來描述用戶界面，JSX既不是字符串也不是HTML，而是XML與JS的混合體html

JSX語法：
一、容許在JS中書寫XML標籤
二、只能有一個頂層元素
三、支持插值表達式 （強大）
四、大寫字母開頭的標籤是組件，小寫字母開頭的標籤是html
<Html></Html>組件
<html></html>html標籤

插值表達式語法：{表達式}

書寫 JSX 的時候通常都會帶上換行和縮進，這樣能夠加強代碼的可讀性
一樣推薦在 JSX 代碼的外面擴上一個小括號，這樣能夠防止 分號自動插入 的 bug
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

文本插值

<p>{1}</p>            //<p>1</p>
<p>{'xinxin'}</p>     //<p>xinxin</p>
<p>{true}</p>         //<p></p> 
<p>{false}</p>        //<p></p>
<p>{null}</p>         //<p></p>
<p>{undefined}</p>    //<p></p>
<p>{NaN}</p>          //<p>NaN</p>  有警告
<p>{ [1,'ww'] }</p>   //<p>1ww</p>
<p>{ {'bb': 12} }</p> //報錯