在React中渲染多個組件單路由

我有兩個組件的路由。在React中渲染多個組件單路由

首頁
設置

首頁我沒有在代碼的任何控制，我不能修改它。我只能編寫代碼進行設置。

現在，一旦用戶保存設置，應用程序將重定向到主頁。在這裏我想顯示保存設置的成功消息。成功消息組件也可以做，但是這裏我需要一種方法來同時呈現主頁組件和成功消息組件，如果保存設置。成功消息將在20秒後卸載。

由於我無法修改主頁，因此我無法在此處放置任何條件以顯示消息或將任何參數作爲參數傳遞，同時從設置返回主頁。

任何建議都會有幫助。

來源

2017-08-07 Sudarshan

您是否可以將主頁組件包裝到新組件中並顯示它？ ''-ish –

是的，我的想法和Henrik一樣。同樣，一旦設置保存成功，顯示成功消息組件鏈接到底部的主頁組件，以便用戶可以重定向到主頁。 –

你有權訪問根組件嗎？ – Jason

將成功消息存儲在像Redux這樣的狀態管理容器中。在主頁中，使用componentWillReceiveProps設置本地狀態，如下所示。

componentWillReceiveProps(nextProps) { 
    if (nextProps.settingsMessage !== this.props.settingsMessage) { 
    setTimeout(() => { 
     this.setState({ settingsMessage: '' }); 
    }, 20000); 
    this.setState({ settingsMessage: nextProps.settingsMessage }); 
    } 
}

在Home組件中顯示settingsMessage。

{this.state.settingsMessage && (
    <div>{this.state.settingsMessage}</div> 
)}

來源

2017-08-07 05:30:19 vijayst

我認爲這是最好的，但是我沒有訪問權限來更新Home組件，因爲它已經存在並且沒有開發/更改可以在那裏進行現在。 – Sudarshan

我在這裏看到兩種潛在的方法。

第一種方式，您可以使用首頁作爲背景，然後重定向。你可以設置Timeout來渲染幾秒鐘：

<div> 
    <homepage/> 
    <successMsg/> 
</div>

然後重定向到主頁。我知道這是一種非常奇怪的做事方式，但是你真的無法控制你不擁有的組件，這就是反應的目的不是它。

另一種方法是使用根容器（如果您有訪問權限）。一些程序員只會在根容器內部提供一些組件，例如在正常情況下不可見的通知，消息或彈出窗口。如果你確實有這個問題，你可以設置REDX或者flux來重定向之後觸發你的消息。或者你可以簡單地使用事件發射器，如果你沒有使用redux或flux。

來源

2017-08-07 06:00:57 Jason

我會嘗試你的第一個建議，我認爲它應該可以解決我的問題。 – Sudarshan

@Sudarshan Yea我認爲只要主頁不是太大，你應該沒問題，但我強烈建議你與正在舉辦主頁的同事交談:) – Jason

@ Tyan Hau Chiau謝謝:) – Sudarshan

據我所知，這不是直接的方式，我需要解決。

在我改變路由到homepage之前的settings組件中，我使用了原生javascript方式向身體添加一個成功消息5秒。

這不是React方式，而是一種解決方法，一旦Homepage代碼可用，我可以相應地更新代碼。或者我們將在homepage中有一個方法，根據路由功能中傳遞的參數顯示成功消息。通過這種方式，所有其他頁面也可以向homepage提供自己的消息，其中homepage將首先檢查並呈現消息。

謝謝大家的支持。

來源

2017-08-10 06:47:26 Sudarshan

在React中渲染多個組件單路由

回答

相關問題