我應該如何構建一個React項目，其中每次渲染組件的方式都不相同？

我有一個組件依賴於幾個AJAX調用來完成渲染。 AJAX調用每次都會返回不同的內容。我想有一個按鈕，每次都會重新渲染隨機組件。現在，我有兩個組件，Random和Next。我應該如何構建一個React項目，其中每次渲染組件的方式都不相同？

Next目前呈現本身是這樣的：

render() { 
    return (
    <div> 
     <Random variable={this.getVariable()}></Random> 
     <button>Next</button> 
    </div> 
); 
}

和Random呈現本身是這樣的：

render() { 
    return (
    <div className="clue-module col-md-4"> 
     <div>{this.props.variable}</div> 
     {this.renderTags()} 
    </div> 
); 
}

所以我把它現在的方式是，在Next，我做一個AJAX調用得到的迴應是this.getVariable()。然後傳入Random。 Random將使用值this.props.variable作爲請求參數進行AJAX調用。在其render中，它顯示的值爲this.props.variable以及this.renderTags()，這是第二次AJAX調用的結果。

現在這個工作不正常。 AJAX調用是成功的，但不是在一起。我認爲這是因爲在請求完成之前呈現Next，然後Random未正確呈現，因爲它沒有及時獲得Next AJAX調用的結果。

我應該怎樣設計出來？是否所有的請求都在Random？那麼我將如何設置Next，以便每次點擊按鈕時都會顯示新的Random？

來源

2015-10-29 Cassidy Williams

您可以將組件作爲一個整體而不僅僅是渲染功能嗎？ – Dormouse

您應該嘗試在父級中使用狀態變量並將ajax傳遞給該父級。通常在componentDidMount（）中。

componentDidMount() { this.setState({variable: this.getVariable}); } 
 
render() { 
 
    return (
 
    <div> 
 
     <Random variable={this.state.variable}></Random> 
 
     <button>Next</button> 
 
    </div> 
 
); 
 
}

來源

2015-10-29 17:12:04

我會建議使用助焊劑式的建築風格在你的代碼變得意大利麪，但基本上你想接下來的狀態改變每次你得到一個新的價值的時間。

因此，在回調的Ajax調用，執行到this.setState({theVar: theValue})

調用setState()通話將觸發渲染的Next

接下來的render()方法變得

render() { 
    return (
    <div> 
     <Random variable={this.state.theVar}></Random> 
     <button>Next</button> 
    </div> 
); 
}

編輯爲了完整起見，觸發pa Next的的出價並通過Next的道具傳遞值將獲得相同的結果。這就是Flux中「控制器視圖」概念背後的想法（以商店爲模）

來源

2015-10-29 17:15:36

在AJAX請求完成之前，我應該如何解決組件渲染問題？ –

我應該如何構建一個React項目，其中每次渲染組件的方式都不相同？

回答

相關問題