React 學習筆記（一） JSX

2021-08-18 23:42:37 字數 2755 閱讀 3679

jsx：本質上來說，jsx只是react.createelement(component, prop, ...children) 方法的語法糖

header content
等價於：

react.createelement(


'myheader',        // type


,  // props


'header content' // ...children


)
jsx的語法與原生html標籤有一定相似性，不含有子節點的標籤可以使用「自閉和」形式

它的...children引數就被設定為null，接下來我們逐個分析jsx語法裡的各個元素

type：jsx語法的第一部分決定了react element的型別

大寫的type表明了它是乙個react元件的引用，所以你必須保證（1）「myelement」在作用域中；同時因為jsx會被編譯成為react.component(...)的形式，所以你還必須保證（2）react的library在作用域中

import react from 'react'        // react library


import myelement from '...' // myelement component


function dosth()
就像這樣

其他值得注意的：

const mycomponets = 


footer: function footer(props) 


}function dosth()
首字母小寫的jsx type代表著內建元件，如div, p, span，react會將它作為html標籤

你不能使用表示式作為jsx的type，但是可以將它的結果賦值給乙個首字母大寫的變數

function dosth(props)
functin dosth(props)
jsx 的 props有多種指定的方式：

就像：

注意：if 語句和 for迴圈並不是expression，所以不能直接放在props中，但是可以放在jsx外達成相同的效果：

正確的做法是：

for (item in list) 


result = dosth(result);


return }
以下兩種方式是等價的：

在字面量中，你甚至可以使用'指定乙個prop的時候，如果不指定值，那他預設是 true。但是很不推薦這樣做，因為在es6的規範中，是的簡寫形式，容易引起混淆

可以將乙個物件作為props傳入jsx

function dosth()
function dosth() 


return }
以上兩種用法是等價的

更進一步，可以將props解構成特定的props，並將其他的props放入可擴充套件屬性中，如：

function header = props =>  = props;


return 


;}
總結起來，這種方式雖然使用方便，但是有可能吧不重要的屬性也傳入；並且可能傳入不合法的屬性；所以，請謹慎使用

子元素是乙個特殊的prop-props.children，位於jsx標籤之中，它可以通過多種方法傳入：

注意：這些方法都可以混合使用

hello
jsx會自動去除多餘的空行和空格

可以將其他jsx元素作為子元素

reactcomponent可以返回乙個元素的陣列

render()
慣用法：渲染乙個jsx表示式的列表

render()
可以傳入自定義元件的子元素可以是任意的，就像其他prop

// calls the children callback numtimes to produce a repeated component


function repeat(props) 


return ;}


function listoftenthings() in the list


} 


);}
很不常用，但是jsx可以做到！

它們不會被渲染

tips：用於條件渲染

render() 


)}
請注意，0之類的「類錯誤」值並不會被忽視，請用 expressioncanbiggerthanzero > 0的表示式來替換0值，如：

render()     // 直接使用message.length不會產生預期結果


)}
另外，如果你想讓false、true、null、undefined出現在輸出中，請轉換為字串

render() 


)}

React起步與JSX（一）

react開發環境準備 官網安裝 將會為我們自動生成乙個react專案 1.專案結構 2 只要有jsx語法就要引入react包 2.react中的jsx基礎語法 1 在jsx中，可以使用html的標籤，也可以使用自定義標籤 2 在jsx中，如果要使用自己建立的元件，直接通過標籤形式使用即可 impo...

React之jsx語法特性

jsx 語法，直接可以在js中使用html標籤。還可以通過花括號的形式，在html標籤中，寫js表示式。hello,world！事件是大寫 addreact中的程式設計思想是，面向資料程式設計。只要定義資料就ok了，資料變了，頁面展示的內容就會變了。react刪除不需要操作dom，只需要運算元據就可...

React中Jsx的介紹

優點 jsx執行更快 型別更安全，編譯過程如果出錯就不能編譯 jsx編寫模板更加簡單快速 jsx表示式 由html元素構成 中間如果需要插入變數用 中間可以使用表示式 中間表示式中可以使用jsx物件 屬性和html內容一樣都是用 來插入內容 jsx樣式 1.class中不可以存在多個class屬性 ...