如何動態地將React組件插入DOM（例如對話框）？

Question

我想用一個處理相同任務的React Component替換javascript內置的alert()函數：即向用戶顯示一條快速的，可忽略的消息。

現在，我可以通過創建一個組件並將其放置在我的標記中來實現這一目標。 例如

<div> 
    <BunchOfComponents />
    <MoreComponents />

    <MyAlertDialog open={this.props.shouldShowAlert} />
</div>

然后通過Redex或其他方式控制其open狀態以使其顯示。

然而，我想要做什么，它能夠在我的標記沒有宣布它，而不是將其注入到通過功能的DOM。

就像是...

myCoolFunction() {
    const alert = (
        <MyAlert
            open={true}
            msg="Hello World" 
        />
    )
    DOM.findNode('someID').insert(alert);  <-- fake API obviously   
}

是否可以動態附加這樣的組件？

Answer 1

如果將其渲染為空節點，則可以在DOM渲染樹中注入一些使用DOM操作的自定義內容。 假設您在react的渲染中有某個地方：

<div id="you-know-id />

然后，您可以按ID查找此節點，並為其分配innerHTML 。 更“反應靈敏”的方法是使用ref而不是id。

通常，這些東西被包裝在componentDidMount （您在其中插入）和componentWillUnmount （您在其中刪除和取消訂閱）方法中。

因為，做一些卑鄙的把戲，您可能希望避免內存泄漏。 因此，這就是方法。

順便說一句，我認為這不是解決您剛剛描述的問題的正確方法。 您可以做的是這樣的：

{ this.props.shouldShowAlert && <MyAlertDialog open={ true } /> }

然后，在打開時將實際安裝 in，在關閉時將其實際卸載。

不過，使用狀態或prop成員控制注入更為安全。 當您執行直接DOM操作時，您確實需要知道您在做什么。 說，包裝一些jQuery插件:)。 那您就好了，因為沒有其他方法:)。

Answer 2

這是我在工作中做的骯臟的方式（聽起來不正確...） http://codepen.io/matthsiung/pen/JKOpVW

我敢肯定，有一種更好的“適當”方法可以做到這一點，但它會自行清理，因此對我有用。

以下是關鍵點：

對話觸發

//Your trigger function will render the dialog component to a newly created dummy div,
// while also passing it into the component as a prop

function showDialog() {
  var div = document.createElement('div');
  ReactDOM.render(
     <Dialog container={div}/>,
     document.body.appendChild(div)
  );
} 

對話框組件：

//When your dialog component closes it unmounts itself
close(){
  ReactDOM.unmountComponentAtNode(this.props.container);
},

//Before unmount it cleans up after itself by removing the dummy div   
componentWillUnmount() {
 document.body.removeChild(this.props.container); 
},

Answer 3

也許反應門戶可以為您提供幫助。

從文檔：

將其子級傳輸到新的React組件中並將其附加到document.body（創建新的獨立React樹）

我使用很多（用於對話框/模式和菜單彈出窗口）。 非常有用且輕巧。