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