2017-03-16 77 views
0

設置在父組件的默認類擴展組件:ReactJS:從改變家長組件重新呈現在孩子

renderChildren() { 
    let children = Mongo.Collection.find().fetch(); // array of objects 
    return children.map((child) => (
    <Child key={child._id} child={child} /> 
)); 
} 

<Parent> 
    {this.renderChildren()} 
</Parent> 

...在子組件

toggleStatus() { 
    //changes the status on collection 
    Meteor.call('changeStatus', this.props.child._id, this.props.child.status); 
} 
render() { 
    return (
    <span onClick={this.toggleStatus.bind(this)}>Change Status</span> 
) 
} 

問題:整個父是每次兒童改變狀態時重新呈現。有道理...

如何我只能重新渲染孩子,不是父?

回答

1

有解決這個問題,我能想到的兩種方法:

  1. 通過使一類,並讓它延長React.Component給孩子組件狀態。我個人會做方案二
  2. 通行證toggleStatus孩子從父和使用,在孩子設置狀態。

I answered this question關於父母和孩子的組件,可能會給你一個更好的想法如何將其傳遞下來。

+0

好的,這是我的嘗試。在父組件中,在擴展'TrackerReact(Component){''我有我的功能:'handleStatus(e){Meteor.call('toggleStatus',e.categoryName,e._id,e.status); }' 然後,在我的'collectionFunction(){返回posts.map((柱)=>());}'然後,在我的孩子的組件'返回()'問題,所有的功能,只要它呈現...思想火災? – Daltron

+0

好吧,我立即通過將子組件更改爲' this.handleStatus(post)} />));}來停止它的發射,但父母正在重新呈現再次...將使用狀態有所作爲? – Daltron

+0

好吧,我想我明白,也許,該怎麼做:在我的子組件{class Child}中擴展組件{constructor(props){super(props); this.state = this.props.child}'好吧,這會將每個子組件的狀態設置爲從父對象傳遞給它的對象......在孩子內部,我可以只反映孩子的狀態。當我點擊按鈕時,它應該改變孩子的狀態並更新數據庫......聽起來是對的嗎? – Daltron