資訊專欄INFORMATION COLUMN
摘要：那是因為設(shè)置可能會導(dǎo)致跨站腳本攻擊，所以團隊認為把事情搞復(fù)雜可以防止警示大家濫用這個屬性。下一節(jié)中我們將介紹小書和組件參數(shù)驗證。
React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson23
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
{% raw %}
這一節(jié)我們來補充兩個之前沒有提到的屬性，但是在 React.js 組件開發(fā)中也非常常用，但是它們也很簡單。
出于安全考慮的原因（XSS 攻擊），在 React.js 當中所有的表達式插入的內(nèi)容都會被自動轉(zhuǎn)義，就相當于 jQuery 里面的 text(…) 函數(shù)一樣，任何的 HTML 格式都會被轉(zhuǎn)義掉：
class Editor extends Component {
constructor() {
super()
this.state = {
content: "React.js 小書
"
}
}
render () {
return (
{this.state.content}
)
}
}
假設(shè)上面是一個富文本編輯器組件，富文本編輯器的內(nèi)容是動態(tài)的 HTML 內(nèi)容，用 this.state.content 來保存。我希望在編輯器內(nèi)部顯示這個動態(tài) HTML 結(jié)構(gòu)，但是因為 React.js 的轉(zhuǎn)義特性，頁面上會顯示：
表達式插入并不會把一個 渲染到頁面，而是把它的文本形式渲染了。那要怎么才能做到設(shè)置動態(tài) HTML 結(jié)構(gòu)的效果呢？React.js 提供了一個屬性 dangerouslySetInnerHTML，可以讓我們設(shè)置動態(tài)設(shè)置元素的 innerHTML：
...
render () {
return (
)
}
...
需要給 dangerouslySetInnerHTML 傳入一個對象，這個對象的 __html 屬性值就相當于元素的 innerHTML，這樣我們就可以動態(tài)渲染元素的 innerHTML 結(jié)構(gòu)了。
有寫朋友會覺得很奇怪，為什么要把一件這么簡單的事情搞得這么復(fù)雜，名字又長，還要傳入一個奇怪的對象。那是因為設(shè)置 innerHTML 可能會導(dǎo)致跨站腳本攻擊（XSS），所以 React.js 團隊認為把事情搞復(fù)雜可以防止（警示）大家濫用這個屬性。這個屬性不必要的情況就不要使用。
styleReact.js 中的元素的 style 屬性的用法和 DOM 里面的 style 不大一樣，普通的 HTML 中的：
React.js 小書
在 React.js 中你需要把 CSS 屬性變成一個對象再傳給元素：
React.js 小書
style 接受一個對象，這個對象里面是這個元素的 CSS 屬性鍵值對，原來 CSS 屬性中帶 - 的元素都必須要去掉 - 換成駝峰命名，如 font-size 換成 fontSize，text-align 換成 textAlign。
用對象作為 style 方便我們動態(tài)設(shè)置元素的樣式。我們可以用 props 或者 state 中的數(shù)據(jù)生成樣式對象再傳給元素，然后用 setState 就可以修改樣式，非常靈活：
React.js 小書
只要簡單地 setState({color: "blue"}) 就可以修改元素的顏色成藍色。
{% endraw %}
下一節(jié)中我們將介紹《React.js 小書 Lesson24 - PropTypes 和組件參數(shù)驗證》。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89680.html
摘要：因為工作中一直在使用，也一直以來想總結(jié)一下自己關(guān)于的一些知識經(jīng)驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：由于會把插入表達式里面數(shù)組中的一個個羅列下來顯示。這樣通過這個布局組件，就可以在各個地方高度復(fù)用我們的布局。嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。下一節(jié)中我們將介紹小書和屬性。 React.js 小書 Lesson22 - props.children 和容器類組件 本文作者：胡子大哈本文原文：http://huziketang.co...
摘要：一個組件類必須要實現(xiàn)一個方法，這個方法必須要返回一個元素。你也可以把它改成，它就會顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的。現(xiàn)在頁面上是顯示小書。下一節(jié)中我們將介紹小書組件的組合嵌套和組件樹。 React.js 小書 Lesson7 - 組件的 render 方法 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...
摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態(tài)上面的結(jié)構(gòu)和內(nèi)容行為，組件的顯示形態(tài)和行為可以由數(shù)據(jù)狀態(tài)和配置參數(shù)共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節(jié)鏈接直達小書基本環(huán)境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類 本文作者：胡子大哈本文原文：http://huziketang.com/books...
摘要：小書最后頁面會顯示內(nèi)容組件可以和組件組合在一起，組件內(nèi)部可以使用別的組件。當頁面結(jié)構(gòu)復(fù)雜起來，有許多不同的組件嵌套組合的話，組件樹會相當?shù)膹?fù)雜和龐大。下一節(jié)中我們將介紹小書事件監(jiān)聽。 React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉(zhuǎn)載請注明出處，保留...
閱讀 2946·2021-11-22 15:25
閱讀 2240·2021-11-18 10:07
閱讀 1045·2019-08-29 15:29
閱讀 472·2019-08-29 13:25
閱讀 1504·2019-08-29 12:58
閱讀 3201·2019-08-29 12:55
閱讀 2911·2019-08-29 12:28
閱讀 500·2019-08-29 12:16
