資訊專欄INFORMATION COLUMN
摘要：我們將為組件賦值，并使用選擇器來(lái)定位頁(yè)面上的元素，讓瀏覽器處理樣式。的工作方式是將因此命名父樣式作為子樣式的樣式。這通常是錯(cuò)誤的原因，因?yàn)轭愅ǔ＞哂型ㄓ妹Q，并且易于覆蓋非特定類的類樣式。反之，我們的樣式名稱需要使用駝峰命名方式。
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3820
原文：https://www.fullstackreact.com/30-days-of-react/day-9/
沒(méi)有樣式的應(yīng)用是不完整。我們將看看我們可以使用不同的方法來(lái)調(diào)整組件，從傳統(tǒng)的CSS到內(nèi)聯(lián)樣式。
通過(guò)這一點(diǎn)，除了將CSS類名附加到組件之外，我們還沒(méi)有觸及我們組件的樣式。 今天，我們將花點(diǎn)時(shí)間去了解我們的React組件的樣式，使它們看起來(lái)很棒，但仍然保持完整。
我們來(lái)看幾種不同的方式來(lái)組合一個(gè)組件。
級(jí)聯(lián)樣式表(CSS)
內(nèi)聯(lián)樣式
樣式庫(kù)
級(jí)聯(lián)樣式表(CSS)使用CSS來(lái)構(gòu)造我們的Web應(yīng)用程序是我們已經(jīng)熟悉的一個(gè)實(shí)踐，并不是什么新鮮事。 如果你以前曾經(jīng)寫(xiě)過(guò)Web應(yīng)用程序，那么你最有可能使用/編寫(xiě)了CSS。 簡(jiǎn)而言之，CSS是我們?yōu)閷?shí)際標(biāo)記之外的DOM組件添加樣式的一種方式。
使用CSS與React不一樣。 我們將在React中使用CSS，就像我們?cè)赺not_使用React時(shí)使用CSS一樣。 我們將為組件賦值ids / classes，并使用CSS選擇器來(lái)定位頁(yè)面上的元素，讓瀏覽器處理樣式。
例如，我們來(lái)設(shè)計(jì)一下我們一直在使用的Header 組件。
假設(shè)我們想使用CSS將標(biāo)題顏色變成橙色。 我們可以通過(guò)在我們的頁(yè)面中添加一個(gè)樣式表，并在CSS類中定位.header 的CSS類來(lái)輕松處理。
回想一下，我們的 Header 組件的render函數(shù)目前看起來(lái)像這樣：
class Header extends React.Component {
render() {
// Classes to add to the element
let searchInputClasses = ["searchInput"];
// Update the class array if the state is visible
if (this.state.searchVisible) {
searchInputClasses.push("active");
}
return (
{this.props.title}
)
}
}
我們可以通過(guò)在普通的css文件中定義一個(gè).header類的樣式來(lái)定位header 。 按照慣例，我們需要確保我們?cè)贖TML頁(yè)面中使用tag來(lái)包含CSS類。 假設(shè)我們將樣式定義在與index.html文件相同的目錄中的styles.css文件中，該標(biāo)簽將如下所示：
讓我們填寫(xiě)Header 類名稱的樣式：
.header {
background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
color: #333333;
}
首先關(guān)于CSS的最常見(jiàn)的抱怨之一是級(jí)聯(lián)功能本身。 CSS的工作方式是將_cascades_（因此命名）父樣式作為子樣式的樣式。這通常是錯(cuò)誤的原因，因?yàn)轭愅ǔ＞哂型ㄓ妹Q，并且易于覆蓋非特定類的類樣式。
我們使用的例子中.header的類名不是很特別。頁(yè)面本身不僅可以有一個(gè)標(biāo)題，而且頁(yè)面上的內(nèi)容框可能是文章，甚至我們放置在頁(yè)面上的廣告都可能有一個(gè).header類名稱。
我們可以避免這個(gè)問(wèn)題的一個(gè)方法是使用像css modules這樣的東西，為我們定義自定義的非常獨(dú)特的CSS類名。
除了CSS模塊之外，CSS模塊還沒(méi)有什么神奇之處，它強(qiáng)制我們的構(gòu)建工具為我們定義了自定義的CSS類名，所以我們可以使用不太獨(dú)特的名稱。
我們稍后將在工作流程中研究使用CSS模塊。
React提供了一種不太新的方法，通過(guò)允許我們與JSX一起定義樣式，從而完全避免了這個(gè)問(wèn)題。
內(nèi)聯(lián)樣式向?qū)嶋H組件添加樣式不僅允許我們定義組件中的樣式，還可以根據(jù)應(yīng)用的不同狀態(tài)動(dòng)態(tài)定義樣式。
React為我們提供了一種使用JavaScript對(duì)象而不是多帶帶的CSS文件來(lái)定義樣式的方法。 讓我們?cè)俅问褂?b>Header 組件，而不是使用css類來(lái)定義樣式，讓我們將它移動(dòng)到內(nèi)聯(lián)樣式。
使用style 屬性可以輕松地定義組件中的樣式。 React內(nèi)的所有DOM元素都接受一個(gè)style屬性，該屬性預(yù)計(jì)是一個(gè)具有駱駝命名的對(duì)象，定義了一個(gè)樣式名稱和值映射到它們的值。
例如，要在JSX中的元素中添加一個(gè)color樣式，這可能是：
const style = { color: "blue" }
This text will have the color blue
請(qǐng)注意，我們使用兩個(gè)大括號(hào)定義了樣式。 當(dāng)我們?cè)谀０鍢?biāo)簽中傳遞一個(gè)JavaScript對(duì)象時(shí)，括號(hào)里是JS對(duì)象，括號(hào)外部是模板標(biāo)簽。
另一個(gè)可能使這個(gè)更清楚的例子是傳遞在JSX之外定義的JavaScript對(duì)象，即
render() { const divStyle = { color: "blue" } return (This text will have the color blue); }
在任何情況下，由于這些是JS定義的樣式，所以我們不能使用任何傳統(tǒng)的css樣式名稱（因?yàn)?b>background-color 在JavaScript中將無(wú)效）。 反之，我們的樣式名稱需要使用駝峰命名方式。
駝峰式大小寫(xiě) 除了第一個(gè)詞首字母小寫(xiě)，其它詞首字母都大寫(xiě)，如backgroundColor 和linearGradient。
要更新我們的頭部組件以使用這些樣式，而不是依賴于CSS類定義，我們可以在style 屬性之后添加className 屬性：
class Header extends React.Component {
// ...
render() {
// Classes to add to the element
let searchInputClasses = ["searchInput"];
// Update the class array if the state is visible
if (this.state.searchVisible) {
searchInputClasses.push("active");
}
const wrapperStyle = {
backgroundColor: "rgba(251, 202, 43, 1)"
}
const titleStyle = {
color: "#111111"
}
const menuColor = {
backgroundColor: "#111111"
}
return (
{this.props.title}
{/* Adding an onClick handler to call the showSearch button */}
)
}
}
我們的標(biāo)題將再次變成橙色。
樣式庫(kù)React社區(qū)是一個(gè)充滿活力的地方（這是一個(gè)理想的庫(kù)工作的原因之一）。有很多樣式庫(kù)可以用來(lái)幫助我們建立我們的風(fēng)格，如Radium這樣強(qiáng)大的實(shí)驗(yàn)室。
大多數(shù)這些庫(kù)都是基于React開(kāi)發(fā)人員通過(guò)使用React定義的工作流。
Radium允許我們定義在React組件本身之外的公共樣式，它自動(dòng)提供前綴，支持媒體查詢（如:hover和:active），簡(jiǎn)化了內(nèi)聯(lián)樣式，并且還有更多種類。
我們不會(huì)在這篇文章中介紹Radium，因?yàn)樗辉诒鞠盗械姆秶畠?nèi)，但是知道其他的庫(kù)是很好的，特別是如果你想擴(kuò)展內(nèi)聯(lián)樣式的定義。
現(xiàn)在我們知道如何組合我們的組件，我們沒(méi)有遇到太多的麻煩可以做一些好看的。在下一部分中，我們將馬上回到為組件添加用戶交互性。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84670.html
摘要：今天我們將討論創(chuàng)建組件的最終方案，即無(wú)狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：無(wú)論何時(shí)狀態(tài)改變通過(guò)，組件將重新投遞。在調(diào)用函數(shù)之后，我們可以將第二個(gè)參數(shù)傳遞給函數(shù)，該函數(shù)將在狀態(tài)更新后保證被調(diào)用。今天，我們更新了我們的組件以使其處于狀態(tài)狀態(tài)，現(xiàn)在有必要處理如何使組件成為狀態(tài)。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文我們做到了第天。歡迎來(lái)到最后一天恭喜你做到了我們此行的最后一個(gè)部分是通過(guò)參與。反應(yīng)社區(qū)是活躍成長(zhǎng)和友好的。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我們做到了！第30天...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將添加一個(gè)構(gòu)建過(guò)程來(lái)存儲(chǔ)常見(jiàn)的構(gòu)建操作，以便我們可以輕松地開(kāi)發(fā)和部署我們的應(yīng)用。在要?jiǎng)?chuàng)建應(yīng)用的目錄中打開(kāi)終端窗口。文件有一個(gè)的節(jié)點(diǎn)，這個(gè)應(yīng)用本身將被自動(dòng)掛載這是在文件中處理的。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將看看一些即將推出的選項(xiàng)，以便我們的網(wǎng)站啟動(dòng)并運(yùn)行。昨天我們離開(kāi)了準(zhǔn)備第一次部署我們的應(yīng)用程序。現(xiàn)在的問(wèn)題是我們要在哪里和如何部署讓我們來(lái)探索什么這與部署非頁(yè)應(yīng)用程序類似。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3802原文：https://www.fullstackreact.c...
閱讀 1629·2023-04-25 16:29
閱讀 955·2021-11-15 11:38
閱讀 2292·2021-09-23 11:45
閱讀 1420·2021-09-22 16:03
閱讀 2538·2019-08-30 15:54
閱讀 1204·2019-08-30 10:53
閱讀 2603·2019-08-29 15:24
閱讀 1102·2019-08-26 12:25
