資訊專欄INFORMATION COLUMN
摘要：所以我們給評論組件加上刪除評論的功能，這樣就可以刪除不想要的評論了。輸入這是代碼塊，這是正常內(nèi)容。到目前為止，第二階段的實戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。下一節(jié)中我們將介紹小書高階組件。
React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六）
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson27
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
{%raw%}
刪除評論現(xiàn)在發(fā)布評論，評論不會消失，評論越來越多并不是什么好事。所以我們給評論組件加上刪除評論的功能，這樣就可以刪除不想要的評論了。修改 src/Comment.js 的 render 方法，新增一個刪除按鈕：
...
render () {
const { comment } = this.props
return (
{comment.username}
：
{comment.content}
{this.state.timeString}
刪除
)
}
...
我們在后面加了一個刪除按鈕，因為 index.css 定義了樣式，所以鼠標(biāo)放到特定的評論上才會顯示刪除按鈕，讓用戶體驗好一些。
我們知道評論列表數(shù)據(jù)是放在 CommentApp 當(dāng)中的，而這個刪除按鈕是在 Comment 當(dāng)中的，現(xiàn)在我們要做的事情是用戶點擊某條評論的刪除按鈕，然后在 CommentApp 中把相應(yīng)的數(shù)據(jù)刪除。但是 CommentApp 和 Comment 的關(guān)系是這樣的：
Comment 和 CommentApp 之間隔了一個 CommentList，Comment 無法直接跟 CommentApp 打交道，只能通過 CommentList 來轉(zhuǎn)發(fā)這種刪除評論的消息。修改 Comment 組件，讓它可以把刪除的消息傳遞到上一層：
class Comment extends Component {
static propTypes = {
comment: PropTypes.object.isRequired,
onDeleteComment: PropTypes.func,
index: PropTypes.number
}
...
handleDeleteComment () {
if (this.props.onDeleteComment) {
this.props.onDeleteComment(this.props.index)
}
}
render () {
...
刪除
現(xiàn)在在使用 Comment 的時候，可以傳入 onDeleteComment 和 index 兩個參數(shù)。index 用來標(biāo)志這個評論在列表的下標(biāo)，這樣點擊刪除按鈕的時候我們才能知道你點擊的是哪個評論，才能知道怎么從列表數(shù)據(jù)中刪除。用戶點擊刪除會調(diào)用 handleDeleteComment ，它會調(diào)用從上層傳入的 props. onDeleteComment 函數(shù)告知上一層組件刪除的消息，并且把評論下標(biāo)傳出去?，F(xiàn)在修改 src/CommentList.js 讓它把這兩個參數(shù)傳進(jìn)來：
class CommentList extends Component {
static propTypes = {
comments: PropTypes.array,
onDeleteComment: PropTypes.func
}
static defaultProps = {
comments: []
}
handleDeleteComment (index) {
if (this.props.onDeleteComment) {
this.props.onDeleteComment(index)
}
}
render() {
return (
{this.props.comments.map((comment, i) =>
當(dāng)用戶點擊按鈕的時候，Comment 組件會調(diào)用 props.onDeleteComment，也就是 CommentList 的 handleDeleteComment 方法。而 handleDeleteComment 會調(diào)用 CommentList 所接受的配置參數(shù)中的 props.onDeleteComment，并且把下標(biāo)傳出去。
也就是說，我們可以在 CommentApp 給 CommentList 傳入一個 onDeleteComment 的配置參數(shù)來接受這個刪除評論的消息，修改 CommentApp.js：
...
handleDeleteComment (index) {
console.log(index)
}
render() {
return (
現(xiàn)在點擊刪除按鈕，可以在控制臺看到評論對應(yīng)的下標(biāo)打印了出來。其實這就是這么一個過程：CommentList 把下標(biāo) index 傳給 Comment。點擊刪除按鈕的時候，Comment 把 index 傳給了 CommentList，CommentList 再把它傳給 CommentApp。現(xiàn)在可以在 CommentApp 中刪除評論了：
...
handleDeleteComment (index) {
const comments = this.state.comments
comments.splice(index, 1)
this.setState({ comments })
this._saveComments(comments)
}
...
我們通過 comments.splice 刪除特定下標(biāo)的評論，并且通過 setState 重新渲染整個評論列表；當(dāng)然了，還需要把最新的評論列表數(shù)據(jù)更新到 LocalStorage 中，所以我們在刪除、更新以后調(diào)用了 _saveComments 方法把數(shù)據(jù)同步到 LocalStorage 中。
現(xiàn)在就可以愉快地刪除評論了。但是，你刪除評論以后 5 秒鐘后就會在控制臺中看到報錯了：
這是因為我們忘了清除評論的定時器，修改 src/Comment.js，新增生命周期 commentWillUnmount 在評論組件銷毀的時候清除定時器：
...
componentWillUnmount () {
clearInterval(this._timer)
}
...
這才算完成了第 5 個需求。
顯示代碼塊用戶在的輸入內(nèi)容中任何以 `` 包含的內(nèi)容都會用 包含起來顯示到頁面上。 這是一個 HTML 結(jié)構(gòu)，需要往頁面動態(tài)插入 HTML 結(jié)構(gòu)我們只能用 dangerouslySetInnerHTML 了，修改 src/Comment.js，把原來 render() 函數(shù)中的：
{comment.content}
修改成：
我們把經(jīng)過 this._getProcessedContent 處理的評論內(nèi)容以 HTML 的方式插入到
元素中，this._getProcessedContent 是這樣實現(xiàn)的：
...
_getProcessedContent (content) {
return content
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/"/g, "'")
.replace(/`([Ss]+?)`/g, "$1")
}
...
看起來很復(fù)雜，其實前 5 行是用來處理 HTML 內(nèi)容轉(zhuǎn)義的，最后一行是用來插入 標(biāo)簽的。如果我們把用戶輸入的內(nèi)容全部以 HTML 顯示到頁面上，那么就會造成跨站腳本攻擊。所以前 5 個 replace 實際上是把類似于 <、> 這種內(nèi)容替換轉(zhuǎn)義一下。而最后一行才是真正實現(xiàn)需求的代碼，把 `` 包含的內(nèi)容用 包裹起來。
輸入：
這是代碼塊 `console.log`，這是
正常內(nèi)容
。
看看效果：
我們安全地完成了第 6 個需求。到目前為止，第二階段的實戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。
總結(jié)到這里第二階段已經(jīng)全部結(jié)束，我們已經(jīng)掌握了全部 React.js 實戰(zhàn)需要的入門知識。接下來我們會學(xué)習(xí)兩個相對比較高級的 React.js 的概念，然后進(jìn)入 React-router 和 Redux 的世界，讓它們配合 React.js 來構(gòu)建更成熟的前端頁面。
{%endraw%}
下一節(jié)中我們將介紹《React.js 小書 Lesson28 - 高階組件（Higher-Order Components）》。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89676.html
摘要：因為工作中一直在使用，也一直以來想總結(jié)一下自己關(guān)于的一些知識經(jīng)驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：修改請輸入用戶名請輸入評論內(nèi)容我們增加了和分別用于加載和保存評論列表數(shù)據(jù)。現(xiàn)在發(fā)布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能六。 React.js 小書 Lesson26 - 實戰(zhàn)分析：評論功能（五） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...
摘要：但是給傳遞的評論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評論時沒有反應(yīng)的。包括實現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經(jīng)結(jié)束，你可以利用這些知識點來構(gòu)建簡單的功能模塊了。 React.js 小書 Lesson16 - 實戰(zhàn)分析：評論功能（三） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉(zhuǎn)載請注明出處...
摘要：對于上面這個評論功能，可以粗略地劃分成以下幾部分評論功能的整體用一個叫的組件包含起來。每個評論列表項由獨立的組件負(fù)責(zé)顯示，這個組件被所使用。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能二。 React.js 小書 Lesson14 - 實戰(zhàn)分析：評論功能（一） 本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉(zhuǎn)載請注明出處，保...
摘要：例如，上面設(shè)置了的為，在中被初始化為空字符串。如何向傳遞的數(shù)據(jù)父組件只需要通過給子組件傳入一個回調(diào)函數(shù)。當(dāng)用戶點擊發(fā)布按鈕的時候，調(diào)用中的回調(diào)函數(shù)并且將傳入該函數(shù)即可。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能三。 React.js 小書 Lesson15 - 實戰(zhàn)分析：評論功能（二） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...
閱讀 3415·2023-04-26 02:41
閱讀 2468·2023-04-26 00:14
閱讀 2883·2021-08-11 10:22
閱讀 1292·2019-12-27 11:38
閱讀 3582·2019-08-29 18:34
閱讀 2389·2019-08-29 12:13
閱讀 2961·2019-08-26 18:26
閱讀 1872·2019-08-26 16:49
