當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

reactjs jsx语法规则

發布時間：2025/1/21 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 reactjs jsx语法规则小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jsx語法規則：
1.定義虛擬DOM時，不要寫引號。
2.標簽中混入JS表達式時要用{}。
3.樣式的類名指定不要用class，要用className。
4.內聯樣式，要用style={{key:value}}的形式去寫。
5.只有一個根標簽
6.標簽必須閉合
7.標簽首字母
(1).若小寫字母開頭，則將該標簽轉為html中同名元素，若html中無該標簽對應的同名元素，則報錯。
(2).若大寫字母開頭，react就去渲染對應的組件，若組件沒有定義，則報錯。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jsx語法規則</title><style>.title{background-color: orange;width: 200px;}</style> </head> <body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.創建虛擬DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虛擬DOM到頁面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx語法規則：1.定義虛擬DOM時，不要寫引號。2.標簽中混入JS表達式時要用{}。3.樣式的類名指定不要用class，要用className。4.內聯樣式，要用style={{key:value}}的形式去寫。5.只有一個根標簽6.標簽必須閉合7.標簽首字母(1).若小寫字母開頭，則將該標簽轉為html中同名元素，若html中無該標簽對應的同名元素，則報錯。(2).若大寫字母開頭，react就去渲染對應的組件，若組件沒有定義，則報錯。*/</script> </body> </html>

總結

以上是生活随笔為你收集整理的reactjs jsx语法规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： reactjs基础：jsx小练习
下一篇： ZoomIt – 屏幕标注、电子画笔 [