資訊專欄INFORMATION COLUMN
摘要：文檔翻譯系列三簡(jiǎn)介先來(lái)看一下下面的變量聲明這種有趣的標(biāo)簽語(yǔ)法既不是字符串也不是。這種形式被稱作，他是的一種擴(kuò)展語(yǔ)法。為便于閱讀，我們將分隔成多行。表示對(duì)象將編譯成調(diào)用。我們建議您為選擇的編輯器搜索語(yǔ)法方案，以便和代碼都能夠被正確高亮的顯示。
React文檔翻譯系列（三）JSX簡(jiǎn)介
先來(lái)看一下下面的變量聲明：
const element =Hello world!
這種有趣的標(biāo)簽語(yǔ)法既不是字符串也不是HTML。
這種形式被稱作JSX，他是Javascript的一種擴(kuò)展語(yǔ)法。我們推薦在React中使用這種形式來(lái)描述UI該是什么樣子的。JSX可能會(huì)讓你想起某種模板語(yǔ)言，但是它具有Javascript的全部功能。
JSX會(huì)生產(chǎn)出React“元素”。我們將在下一部分來(lái)探索如何將它渲染到DOM上。接下來(lái)，您可以找到JSX的基礎(chǔ)知識(shí)，以幫助您開(kāi)始使用。
JSX中嵌入表達(dá)式您可以在JSX中，通過(guò)一對(duì)大括號(hào)嵌入任何的Javascript表達(dá)式。
比如2+2,user.firstName,和formatName(user)，這些都是可用的表達(dá)式。
function formatName(user) {
return user.firstName + " " + user.lastName;
}
const user = {
firstName: "Harper",
lastName: "Perez"
};
const element = (
Hello, {formatName(user)}!
);
ReactDOM.render(
element,
document.getElementById("root")
);
在CodePen中嘗試。
為便于閱讀，我們將JSX分隔成多行。我們推薦使用括號(hào)將JSX包裹起來(lái)，盡管這不是必須的，因?yàn)檫@樣可以避免分號(hào)自動(dòng)插入的陷阱。
JSX也是一種表達(dá)式編譯之后，JSX表達(dá)式就變成了常規(guī)的Javascript對(duì)象。
這意味著你可以在if語(yǔ)句或者是for循環(huán)中使用JSX，用它給變量賦值，當(dāng)做參數(shù)接收它，或者作為函數(shù)的返回值。
function getGreeting(user) {
if (user) {
return Hello, {formatName(user)}!
;
}
return Hello, Stranger.
;
}
用JSX指定屬性
您可以使用引號(hào)來(lái)指定字符串作為屬性：
const element = ;
您也可以在一個(gè)屬性中通過(guò)花括號(hào)嵌入一個(gè)Javascript表達(dá)式：
const element = 關(guān)閉它：const element = ;JSX標(biāo)簽可能包含子元素：
const element = ();Hello!
Good to see you here.
警告
由于JSX相對(duì)HTML來(lái)說(shuō)更接近于Javascript，所以React DOM使用駝峰方式為屬性命名來(lái)取代HTML的屬性名。例如，在JSX中，class變成了className，tabindex變成了tabIndex。
JSX防止了注入式攻擊在JSX中，嵌入用戶輸入是安全的：
const title = response.potentiallyMaliciousInput; // This is safe: const element ={title}
;默認(rèn)的，React DOM在渲染通過(guò)JSX嵌入的任何內(nèi)容之前，都會(huì)將他們的值進(jìn)行轉(zhuǎn)義。這樣就確保了除非在你的應(yīng)用中明確的寫出來(lái)的內(nèi)容，絕對(duì)不會(huì)注入其他任何內(nèi)容。
JSX表示對(duì)象
在被渲染之前，所有的東西都被轉(zhuǎn)義成為了字符串，這樣就能幫助您防止XSS（cross-site-scripting）攻擊。Babel將JSX編譯成React.createElement()調(diào)用。
下面的兩個(gè)例子是相同的：
const element = (Hello, world!
);const element = React.createElement( "h1", {className: "greeting"}, "Hello, world!" );React.createElement()會(huì)執(zhí)行一些檢查來(lái)幫助你寫出沒(méi)有bug的代碼，但是它創(chuàng)建對(duì)象的原理是像下面這樣：
// Note: 這是簡(jiǎn)化的結(jié)構(gòu) const element = { type: "h1", props: { className: "greeting", children: "Hello, world" } };這些對(duì)象被稱作“React元素”。你可以把他們想象成為你想在屏幕上看到的東西的一種描述。React會(huì)讀取這些對(duì)象，用他們來(lái)構(gòu)建DOM，并且保持它們的不斷更新。
我們將在下一部分來(lái)探索如何將React元素渲染到DOM上。
Tips
我們建議您為選擇的編輯器搜索“Babel”語(yǔ)法方案，以便ES6和JSX代碼都能夠被正確高亮的顯 示。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82278.html
摘要：文檔翻譯系列一安裝原文地址原文本系列是針對(duì)文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)的時(shí)候，最開(kāi)始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的接收，并沒(méi)有給自己帶來(lái)很好的效果，所以后來(lái)決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝 原文地址：原文 本系列是針對(duì)React文檔進(jìn)行的翻譯，因?yàn)樽约涸趯W(xué)習(xí)react的時(shí)候，最開(kāi)始通過(guò)看博客或者論壇等中文資料，有些內(nèi)容是零零散散的...
摘要：項(xiàng)目需要安裝的插件配置詳情下面的配置涵蓋了開(kāi)發(fā)者所需要的絕大部分信息，中的值分別表示不開(kāi)啟檢查警告錯(cuò)誤。配置文件類型配置文件類型不只有和，其實(shí)包括下面這些 項(xiàng)目需要安裝的插件 babel-eslint: ^8.0.3, eslint: ^4.13.1, eslint-plugin-react: ^7.5.1, 配置詳情 下面的配置涵蓋了開(kāi)發(fā)者所需要的絕大部分信息，rules中的值0、1...
摘要：代表基本上是常規(guī)。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時(shí)間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉(zhuǎn)換為。在組件的情況下，寫入的將如下所示在我們?cè)诘谝粋€(gè)作出反應(yīng)組件使用的語(yǔ)法是語(yǔ)法。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....
摘要：系列系列簡(jiǎn)單模擬語(yǔ)法一系列合成事件與二系列算法實(shí)現(xiàn)分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六的誕生他是的一種擴(kuò)展語(yǔ)法。這個(gè)函數(shù)接受組件的實(shí)例或元素作為參數(shù)，以存儲(chǔ)它們并使它們能被其他地方訪問(wèn)。 React系列 React系列 --- 簡(jiǎn)單模擬語(yǔ)法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom di...
閱讀 1527·2023-04-26 00:20
閱讀 1122·2023-04-25 21:49
閱讀 803·2021-09-22 15:52
閱讀 578·2021-09-07 10:16
閱讀 972·2021-08-18 10:22
閱讀 2665·2019-08-30 14:07
閱讀 2237·2019-08-30 14:00
閱讀 2651·2019-08-30 13:00
