ReactJS 模态组件

Question

如何创建一个能够达到组件/DOM 层次结构上多个级别的 ReactJS 组件？

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 这样的非 React 库，那就太好了，但如果没有这个需求，仅仅为了在 DOM 中的其他地方渲染 React 组件就需要打破 React 似乎有点矫枉过正。有没有更“React”的方式来实现这一目标？

谢谢

Answer 1

我会把这个最好的事情留给 React 文档。如果您必须埋藏 React 元素，这些元素需要与父子元素甚至祖父元素之外的其他元素进行通信，请参阅下面的内容。

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event.

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