React中JSX 語法使用詳解
這次帶給大家React中JSX 語法使用詳解，React中JSX 語法使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
JSX 語法
一種特殊的js 語法糖，可以在程式碼中把html 標籤當物件使用，可以總結成以下幾個特點：
#不加任何引號
以前在js 中使用html 標籤都是加上引號當成字串#使用，而在jsx 語法中不用加引號，直接當物件使用
var html = <h1>React</h1>;
標籤一定要有對應的結束標籤或結束標識：
有時候我們在寫html 結構的時候，都沒有把對應的結束標識加上，但瀏覽器能正常解析，但在jsx語法當中，則要強制寫標準的html 結構
這一段html 標籤在瀏覽器是能正常解析
<input type="text" value="React">
這一段在jsx 語法當中則會報錯
var html = <input type="text" value="React">;
jsx 正確寫法應該是這樣的
var html = <input type="text" value="React" />; var p = <p>React</p>;
只能有一個根節點
在jsx 語法當中，最頂層的結構一定只有一個節點，不能出現兄弟節點
var html = <p> <h1>Tom</h1> <h1>Lucy</h2> </p>
不能在標籤當中加註解
在jsx 語法當中，html 標籤是一個對象，是一種資料結構，而不是真實的dom 節點，也不是字串，所以在標籤當中不能加入註解。
下面的程式碼是在標籤當中加入了註釋，所以會報錯。
var html = <p> <!--不能添加注释，这里会报错--> <h1>Tom</h1> <h1>Lucy</h2> </p>
jsx 語法允許html 標籤和javascript 程式碼混寫
在jsx 語法當中，要在html 標籤中使用到js 程式碼，則用花括號（{ expression}）括起來。
var name = "DK";
var style = {fontSize: '12px', color: 'red'};
var html = <span style={style}>{name}</span>;最終上面的程式碼將會解析成
<span style="font-size:12px; color:red">DK</span>
React 使用
React 是一個第三方的框架庫，所以在使用前要先把相關的庫文件引入。
<!--React 核心库--> <script src="../../../../libs/react/react.js"></script> <!--React 跟 Dom 相关的功能库--> <script src="../../../../libs/react/react-dom.js"></script> <!--babel 库，将 JSX 语法转为 JavaScript 语法--> <script src="../../../../libs/react/browser.min.js"></script>
React 是基於jsx 語法去實現，所以需要明確script 的類型為text/babel
<script type="text/bebal"></script>
使用React 的核心物件和方法ReactDOM.render進行將html 標籤渲染到指定的容器
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<!--jsx 语法-->
<script type="text/babel">
//将标签直接渲染到容器 p1 当中
ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
var _style = {fontSize: '12px', color: 'red'};
var _name = "Tom";
var _obj = {name: "DK", age: 18};
//标签与 js 代码混写
ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
var array = ["Tom", "Lucy", "Lily"];
//多级标签和 js 代码混写
ReactDOM.render(
<p>
<ul>
{
array.map(function(arg1, arg2){
return <li key={arg2}>{arg1}</li>;
})
}
</ul>
<ul><li>Sam</li></ul>
<ul><li><input type="text" /></li></ul>
</p>,
document.getElementById('p3')
);
</script>
</body>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是React中JSX 語法使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
React與Vue：Netflix使用哪個框架？
Apr 14, 2025 am 12:19 AM
NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）
React的生態系統：庫，工具和最佳實踐
Apr 18, 2025 am 12:23 AM
React生態系統包括狀態管理庫（如Redux）、路由庫（如ReactRouter）、UI組件庫（如Material-UI）、測試工具（如Jest）和構建工具（如Webpack）。這些工具協同工作，幫助開發者高效開發和維護應用，提高代碼質量和開發效率。
反應：JavaScript庫用於Web開發的功能
Apr 18, 2025 am 12:25 AM
React是由Meta開發的用於構建用戶界面的JavaScript庫，其核心是組件化開發和虛擬DOM技術。 1.組件與狀態管理：React通過組件（函數或類）和Hooks（如useState）管理狀態，提升代碼重用性和維護性。 2.虛擬DOM與性能優化：通過虛擬DOM，React高效更新真實DOM，提升性能。 3.生命週期與Hooks：Hooks（如useEffect）讓函數組件也能管理生命週期，執行副作用操作。 4.使用示例：從基本的HelloWorld組件到高級的全局狀態管理（useContext和
React的未來：Web開發的趨勢和創新
Apr 19, 2025 am 12:22 AM
React的未來將專注於組件化開發的極致、性能優化和與其他技術棧的深度集成。 1)React將進一步簡化組件的創建和管理，推動組件化開發的極致。 2)性能優化將成為重點，特別是在大型應用中的表現。 3)React將與GraphQL和TypeScript等技術深度集成，提升開發體驗。
React的前端開發：優勢和技術
Apr 17, 2025 am 12:25 AM
React的優勢在於其靈活性和高效性，具體表現在：1)組件化設計提高了代碼重用性；2)虛擬DOM技術優化了性能，特別是在處理大量數據更新時；3)豐富的生態系統提供了大量第三方庫和工具。通過理解React的工作原理和使用示例，可以掌握其核心概念和最佳實踐，從而構建高效、可維護的用戶界面。
