JSX 文法の基本の概要

タイトル: まず、jsx とは何か、そして js との違いは何かを理解する必要があります。実際、これは js の文法糖に xml の構文を加えたもので、仮想 dom の生成をより便利にします。簡単に言うと、xml はデータを保存するための形式であり、xml を理解したい場合は、json 形式と比較することができます。

例：

//用js去写

let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")


//用jsX写
let Dom = (
    <h1 id='title'>
        你好
    </h1>
)

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

jsx 構文規則:

01. 定義時に順序のない引用符。

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

02. ラベル内に混在する表現は{}で囲みます。

      注: 式はコード ステートメントとは異なります。つまり、if ステートメントと for ステートメントを {} で囲むことはできません。関数と変数は式であり、for と if はコード ステートメントと呼ばれます。

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span>
        {commins}
       </span>
    </h1>
)

let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (
    <div id={title}>
       <span>
        {Array.map((item,index)=>
            {
             return <li key={index}>{item}</li>      
            )}
       </span>
    </div>
)

 

03. スタイル指定の種類はクラスではなくクラス名を使用します。

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (
    <h1 id={title} className={niu}>
       <span>
        {commins}
       </span>
    </h1>
)

04.インライン スタイルに { {}}を追加します。

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span style={
   
   {margin:20px}}>
        {commins}
       </span>
    </h1>
)

05. ルートタグは Vue2 と同じ 1 つだけです。

06. ラベルは閉じていなければなりません。

07. レーベルのイニシャル

        1. 小文字で始まる場合は html タグに変換されます。

        2. 大文字で始まる場合は、対応するコンポーネントが検索されますが、そのようなコンポーネントがない場合は、Vue コンポーネントの命名規則と合わせてエラーが報告されます。