如何在React中創建Toast等全局組件並將其引用到其他組件中？

我正嘗試使用React創建應用程序。我想嚮應用程序全局添加一個吐司組件，以便它可以被其他組件引用來顯示自定義消息。如何在React中創建Toast等全局組件並將其引用到其他組件中？

我想補充的土司在以下層次：

ReactDOM.render(
     <BrowserRouter> 
      <section> 
        <App /> 
        <Toast /> 
      </section> 
     </BrowserRouter>

，並參閱內部應用程序的吐司組件。我怎樣才能實現它？

2017-07-25 sam23

我不會這樣做在React中。我會將Redux添加到我的項目中，以便組件僅與商店進行通信。然後，他們的層次結構並沒有讓他們很難獲得他們需要的數據。您可以創建一個組件，該組件在商店中存在消息時呈現消息。然後，您可以從任何組件派發適當的操作來觸發消息。 –

我沒有想到使用商店的問題。感謝您的指導。 – sam23

不客氣。如果你需要任何幫助，我也很樂意提供幫助。 –

您可以將Toast組件作爲道具傳遞給應用程序。

但這可能不是你應該做的。我假設你希望Toast組件可以被其他組件所能做的各種事情觸發。你會用狀態來做到這一點。讓Toast成爲狀態的函數，並讓其他組件修改狀態。你可以用飛機舊setState做這個，或者使用Redux。雖然Redux的作者會告訴你只使用setState。

此外，因爲它是反應已經可能有7庫做這個。 This one看起來很有希望。

2017-07-25 04:11:37

，但是它會適用於應用程序中的所有兒童組件嗎？還是我需要每次都將它傳遞給子組件？ – sam23

這不是你想要做到的:)如果你這樣做，你會通過道具傳遞元素到各種各樣的孩子，它會變得非常混亂。 –

這絕對不是你只爲*設置狀態*的東西。爲了讓一個組件控制狀態，它需要綁定到其他每個可能需要將消息推送到...的組件。Redux或其他狀態抽象顯然是一種可行的方式。 –

你應該安裝包 https://www.npmjs.com/package/react-toastify ，然後添加導入並在你的頭或類似側邊欄的某個組件正在被在每一個頁面中使用添加

<ToastContainer />

。你現在可以在任何頁面上顯示吐司消息，只需

toast.error("this is toast error");

2017-08-22 12:32:19

回答