如何动态地将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树）

我使用很多（用于对话框/模式和菜单弹出窗口）。 非常有用且轻巧。