jsx基本語法規則

qq_45679015發表於2020-12-23
JS

先上個簡單的react例子叭~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入react核心庫 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom,用於支援react操作DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用於將jsx轉為js -->
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
    // 1.建立虛擬DOM
       const VDOM = (
       <h1>
         <span>hello react</span>
       </h1>

          );//此處不要寫引號，因為不是字串
    // 2.渲染虛擬DOM到頁面
       ReactDOM.render(VDOM,document.getElementById('test'));
    
    </script>
</head>
<body>
    <!-- 準備好一個容器 -->
    <div id="test"></div>
</body>
</html>

在這裡插入圖片描述

1.定義虛擬DOM時，不用寫引號

 // 1.建立虛擬DOM
 const VDOM = (
       <h1>
         <span>hello react</span>
       </h1>
          );//此處不要寫引號，因為不是字串

2.標籤中混入JS表示式時使用{}

使用js變數怎麼輸出呢？

 const myId = 'wOrld';
 const myData = 'hEllO,wOrld';

//1.建立虛擬DOM
  const VDOM = (
    <h1 id={myId.toUpperCase()}>
      <span>{myData.toLowerCase()}</span>    
    </h1>

在這裡插入圖片描述

3.樣式的類名指定不要用class，要用className

搞一個樣式~~

<style>
  .title{
      background-color:#bfa;
  }
</style>

把class新增進去，注意：往標籤新增樣式的類名為className而不是class

//1.建立虛擬DOM
  const VDOM = (
    <h1 className="title" id={myId.toUpperCase()}>
      <span >{myData.toLowerCase()}</span>    
    </h1>
  );

在這裡插入圖片描述

4.內聯樣式，要用style={{key:value}}的形式去寫

//1.建立虛擬DOM
const VDOM = (
  <h1 className="title" id={myId.toUpperCase()}>
    <span style={{color: 'white', fontSize:"33px"}}>{myData.toLowerCase()}</span>    
  </h1>

在這裡插入圖片描述

5.只有一個根標籤

   //1.建立虛擬DOM
          const VDOM = (
            <h1 className="title" id={myId.toUpperCase()}>
              <span style={{color: 'white', fontSize:"33px"}}>{myData.toLowerCase()}</span>    
            </h1>
            
            <h1>
            </h1>
          );

在這裡插入圖片描述

解決方法：在外面巢狀一個根標籤，例如div

//1.建立虛擬DOM
 const VDOM = (
   <div>
       <h1 className="title" id={myId.toUpperCase()}>
            <span style={{color: 'white', fontSize:"33px"}}>{myData.toLowerCase()}</span>    
       </h1>  
   </div>

 );

在這裡插入圖片描述

6.標籤必須閉合

 //1.建立虛擬DOM
          const VDOM = (
            <h1 className="title" id={myId.toUpperCase()}>
              <span style={{color: 'white', fontSize:"33px"}}>{myData.toLowerCase()}</span>    
            </h1>
            <input type="text">

          );

在這裡插入圖片描述
解決方法：標籤必須閉合

 //1.建立虛擬DOM
const VDOM = (
<div>
    <h1 className="title" id={myId.toUpperCase()}>
         <span style={{color: 'white', fontSize:"33px"}}>{myData.toLowerCase()}</span>    
    </h1>
    <input type="text"></input >    
</div>

);

在這裡插入圖片描述

7.標籤首字母

（1）若小寫字母開頭，則將該標籤轉為html中同名元素，若html中無該標籤對應的同名元素，則報錯

 <good>abc</good>

!在這裡插入圖片描述

（2）若大寫字母開頭，react就去渲染對應的元件，若元件沒有定義，則報錯

 <Good>abc</Good>

在這裡插入圖片描述

相關文章