正確使用組件和兒童組件與訪問家長狀態

我們有意見和每個評論有兒童（答案，也評論）我們初始化這樣的組件：正確使用組件和兒童組件與訪問家長狀態

=react_component "CommentList", url: object_comments_path(current_object), page: 1

我們有以下Reactcomponents

CommentList 評論 VoteBar EditBar

它們按以下順序使用（列表，然後渲染的許多評論，每個評論渲染votebar和editbar）

CommentList 
-> Comment 
    -> VoteBar 
    -> EditBar

如果CommentList被初始化，它加載從服務器的評論（第1頁），並將它們保存到一個狀態。

this.setState({comments: all_comments});

渲染功能，那麼只是呈現的評論

# CommentList 
render: function() { 
    comments = this.state.comments.map(function(comment) { 
    return <Comment key={comment.id} comment={comment} /> 
    }); 
    return <div className="commentsList">{comments}</div> 
}

列表**我的問題：**

我們給每個Comment其值的屬性。如果我們想要vote評論（這是VoteBar正在做的），那麼我們如何才能更改CommentList的狀態，以便將該評論標記爲voted=true？

有沒有更好的方法來做到這一點？我們可以雙向將狀態放入其他類嗎？可以說評論列表將&comment納入Comment。如果我們改變Comment的狀態，CommentList會自動改變狀態，如果我們改變列表，評論也會有它（因爲它再次呈現，對嗎？）

**這是一般的思考React如何工作的方式，或者是這種方式？**

來源

2017-04-16 huan son

使用REDX或類似的。當按下「投票」按鈕時，觸發一個動作，派發REDX操作來對CommentList的狀態進行適當的更改。當CommentList更改時，它將重新呈現，並且更改也會反映在子組件中。 –

從來沒有聽過，現在會看看它 –

天哪，檢查它1小時 - 理解幾乎沒有。所有這些教程和事情都是（像往常一樣）遠離現實性，從不顯示常見的使用情況，讓開發人員需要快速瞭解超級沮喪:( –

我已經爲你創建了一個簡單的例子。不能把所有的代碼這裏，所以從here

步驟下載運行

1. Extract and change directory 
2. npm install 
3. npm start

應該啓動你的瀏覽器或去本地主機：3000條

評論中的代碼解釋了很多東西

希望它有幫助

來源

2017-04-16 14:31:57

正確使用組件和兒童組件與訪問家長狀態

回答

相關問題