ReactJS模塊組件

Question

如何創建一個達到組件/ DOM層次上的多個級別的ReactJS組件？

一個很好的例子就是Modal。我想從我的應用程序中嵌套子模式觸發和控制模式，但Modal要求DOM更高，最有可能一直作爲文檔主體的孩子。

我正在考慮一個「門戶」模式，如下所述：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals

FakeRainBrigand甚至很好地包裝了花樣最多，在這個帖子混合：https://stackoverflow.com/a/26789089/586181

這感覺就像一個黑客給我。太棒了，如果你想使用像jquery-ui這樣的無反應的庫，但是如果沒有這種需要，只需要在DOM中的其他地方渲染一個反應組件就好像是矯枉過正。是否有更多的「反應」方式來實現這一目標？

謝謝

Answer 1

我會留下最好的反應文件。如果你必須有隱藏的React元素需要與他們的父子之外的其他元素或可能甚至是祖父母以外的其他元素進行通信，而不是看到下面的內容。

對於兩個組件之間的通信是沒有 父子關係，你可以建立自己的全球盛會 系統。訂閱componentDidMount（）中的事件，在 componentWillUnmount（）中取消訂閱，並在收到事件時調用setState（）。

https://facebook.github.io/react/tips/communicate-between-components.html

Answer 2

我寫了一個庫，以幫助這一點。我避免了門戶策略在那裏使用DOM插入攻擊，而是利用基於上下文的註冊中心將組件從源傳遞到目標。

我的實現使用了標準的React渲染週期。傳送/注入/傳輸的組件不會在目標上產生雙重渲染週期 - 所有事件都會同步發生。

該API的結構也阻止了在代碼中使用魔術字符串來定義源/目標。相反，您需要顯式創建和修飾將用作目標（可注入）和源（注入器）的組件。由於這種事通常被認爲是相當神奇的，我認爲明確的組件表示（需要直接導入和使用）可能有助於緩解組件被注入的混淆。

您可以完全使用我的庫將ModalComponent綁定到使用Injectable助手裝飾的根級別組件。我打算很快添加一個這個用例的例子。它甚至支持自然道具穿透，以及所有各種組件類型，即無狀態/類。

查看https://github.com/ctrlplusb/react-injectables瞭解更多信息。