對REACT中JSX標籤的誤解

2021-10-22 08:48:41 字數 823 閱讀 2009

function welcome(props) 

const element = ;

reactdom.render(

element,

document.getelementbyid('root')

);

在 codepen 上嘗試讓我們來回顧一下這個例子中發生了什麼:

我們呼叫reactdom.render()函式,並傳入作為引數。

react 呼叫welcome元件,並將作為 props 傳入。

welcome元件將元素作為返回值。

react dom 將 dom 高效地更新為

這是react教程第4節的內容(

學到這有一點困惑,最終形成html時,

仔細研究解釋,發現這種想法完全錯誤,實際上是偽**,不是真正的html標籤,這段偽**傳入render()函式後,react會自動呼叫function welcome(props)函式,最終渲染到html頁的只有這段,沒有標籤。

這是在 codepen 開啟瀏覽器開發者模式看到的結果:

React中Jsx的介紹

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

React中jsx呼叫js例子

需求 介面新增乙個 匯入專案 按鈕,點選該按鈕可以執行專案匯入功能。按鈕點選事件部分是jsx語法 而專案匯入部分是封裝的js語法 假設此處用alert 123 代替。若點選按鈕出現alert 123 彈框,表示onclick事件執行了js語法 具體示例如下 專案匯入部分importproject.j...

用於react 中的JSX語法配置方法

什麼是jsx語法 就是符合 xml 規範的 js 語法 語法格式相對來說,要比html嚴謹很多 1.如何啟用 jsx 語法?安裝能夠識別轉換jsx語法的包,就是將jsx轉化為js babel preset react 新增.babelrc配置檔案 新增babel loader配置項 module j...