學習react(JSX語法)

2021-09-24 15:17:11 字數 734 閱讀 4968

1.**建立虛擬dom元素**:

const h1 = react.createelement('h1', , '大標題');

// 第乙個引數: 字串型別的引數,表示要建立的標籤的名稱

// 第二個引數:物件型別的引數, 表示 建立的元素的屬性節點

// 第三個引數: 子節點

使用jsx語法:安裝 `babel` 外掛程式、安裝能夠識別轉換jsx語法的包就能用html( hello 元件

)的風格寫dom元素,注意`標籤必須 成對出現,如果是單標籤,則必須自閉和`;

*jsx 語法的本質*:並不是直接把 jsx 渲染到頁面上,而是 內部先轉換成了 createelement 形式,再渲染的;

2、 **在 jsx 中混合寫入 js 表示式**:在 jsx 語法中,要把 js**寫到 `` 中,支援三目表示式,不支援if -else

3、**在 jsx 中 寫注釋**:推薦使用``,還有另外一種(也就是要進行換行,不推薦使用)

4、**為 jsx 中的元素新增class類名**:需要使用`classname` 來替代 `class`;`htmlfor`替換label的`for`屬性

5、在jsx建立dom的時候,所有的節點,必須有唯一的根元素進行包裹;

當 編譯引擎,在編譯jsx**的時候,如果遇到了`<`那麼就把它當作 html**去編譯,如果遇到了 `{}` 就把 花括號內部的**當作 普通js**去編譯;

React JSX語法 元件

1.react示例 2.jsx語法 元素變數 const dom 我是乙個元素變數 值為元素的變數稱為元素變數 引入外部js 3.classname 指定屬性值時 屬性值是乙個變數,不要在 外加上雙引號 let a one let b two reactdom.render 我確定你就是那只匹著羊皮...

React JSX 常量定義與使用

user是定義資料 const user 格式化資料 function formatname user 拼裝資料 const element 渲染資料 reactdom.render element,document.getelementbyid root 1.對於const表示constant的簡...

React jsx 中寫更優雅 直觀的條件運算子

在這篇文字中我學到了很多知識,同時結合工作中的一些經驗也在思考一些東西。比如條件運算子 condition expr if true expr if false 在jsx中書寫條件語句我們經常都會使用到的就是三目運算子 也叫內聯條件運算子,可能大家都有體會三目運算子並不是一種直觀的書寫方式。特別是在...