2016-11-22 46 views
0

首先,這樣做有意義嗎?其次,我會解釋爲什麼我正在考慮這樣做。傳遞道具而不會渲染任何東西

我有一個組件讓我用戶點擊2個選項中的1個。無論是或不是。 它們被添加到yesArray或noArray中。該組件被稱爲Decision

一旦他們點擊是或否,我渲染Thanks組件。我希望那些說yes的人的數組以及在這個感謝頁面上顯示爲否的人的數組能夠顯示出來。

的問題是使陣列是在Decision但我希望它被上Thanks示出,但如果我通過一個支柱向下像這樣從Decision組件的邏輯:

<Thanks 
    showYesArray={this.state.yesArray} 
/> 

那麼這將使得當它是由一個狀態變化時觸發<Decision />呈現,但在我父組件<Thanks /><Thanks />組件才呈現,這可能是當<Decision />呈現

可以在不同的發佈更多的代碼,如果有必要,並解釋更多

回答

0

該狀態應該位於同時包含Thanks和Decision Element的容器元素中。

render() { 
    return (
    <Decision 
     onYes={this.handleYes} 
     onNo={this.handleNo} 
    /> 

    <Thanks 
     active={this.state.thanksActive} 
     yesArray={this.state.yesArray} 
     noArray={this.state.noArray} 
    /> 
) 
} 
+0

然後我怎麼會通過決定中的函數的數組? –

+0

該數組將處於容器的狀態。 –

+0

您在句柄函數中設置了setState。然後你在你的Thanks組件中渲染這個狀態。 –

0

你可以使用shouldComponentUpdate()並在不需要更新時返回false。但更多的代碼可能會非常有助於查看你的意思。

1

您可以使用標誌像state.decision,最初false,將其設置爲true是點擊/無時,和渲染只有當它的trueThanks組件。

{this.state.decision && <Thanks showYesArray={this.state.yesArray} />} 
相關問題