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