ReactJS 模态组件
ReactJS Modal Component
如何创建达到 component/DOM 层次结构中多个级别的 ReactJS 组件？
模态框就是一个很好的例子。我想从嵌套在我的应用程序中的子级触发和控制模态，但是模态要求 uires 要求 DOM 高得多，很可能作为子级一直向上文档正文。
我正在考虑 "portal" 模式，如下所述：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals
FakeRainBrigand 甚至在这个 post 的混合中很好地包装了模式：
这对我来说就像是一个 hack。如果你想使用像 jquery-ui 这样的非反应库，那就太好了，但是如果不需要打破反应只是为了在 DOM 中的其他地方渲染反应组件似乎有点过分了.有没有更多 "React" 的方法来实现这个目标？
谢谢
我会把这个最好留给 React 文档。如果你必须埋葬需要与 Parent Child 之外的其他元素通信的 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
我已经编写了一个库来帮助解决这个问题。我避免了 Portal 策略使用的 DOM 插入技巧，而是使用基于上下文的注册表将组件从源传递到目标。
我的实现使用了标准的 React 渲染周期。您 teleport/inject/transport 的组件不会在目标上导致双重渲染周期 - 一切都是同步发生的。
API 的结构也不鼓励在代码中使用魔术字符串来定义 source/target。相反，您需要显式创建和装饰将用作目标（可注入）和源（注入器）的组件。由于这种事情通常被认为是非常神奇的，我认为显式组件表示（需要直接导入和使用）可能有助于减轻对组件注入位置的混淆。
您可以完全使用我的库将 ModalComponent 绑定到您使用 Injectable 助手装饰的根级组件。我计划很快添加这个用例的示例。它甚至支持自然道具传递，以及所有各种组件类型，即 stateless/class.
有关详细信息，请参阅 https://github.com/ctrlplusb/react-injectables。
如何创建达到 component/DOM 层次结构中多个级别的 ReactJS 组件？
模态框就是一个很好的例子。我想从嵌套在我的应用程序中的子级触发和控制模态，但是模态要求 uires 要求 DOM 高得多，很可能作为子级一直向上文档正文。
我正在考虑 "portal" 模式，如下所述：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals
FakeRainBrigand 甚至在这个 post 的混合中很好地包装了模式：
这对我来说就像是一个 hack。如果你想使用像 jquery-ui 这样的非反应库，那就太好了，但是如果不需要打破反应只是为了在 DOM 中的其他地方渲染反应组件似乎有点过分了.有没有更多 "React" 的方法来实现这个目标？
谢谢
我会把这个最好留给 React 文档。如果你必须埋葬需要与 Parent Child 之外的其他元素通信的 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
我已经编写了一个库来帮助解决这个问题。我避免了 Portal 策略使用的 DOM 插入技巧，而是使用基于上下文的注册表将组件从源传递到目标。
我的实现使用了标准的 React 渲染周期。您 teleport/inject/transport 的组件不会在目标上导致双重渲染周期 - 一切都是同步发生的。
API 的结构也不鼓励在代码中使用魔术字符串来定义 source/target。相反，您需要显式创建和装饰将用作目标（可注入）和源（注入器）的组件。由于这种事情通常被认为是非常神奇的，我认为显式组件表示（需要直接导入和使用）可能有助于减轻对组件注入位置的混淆。
您可以完全使用我的库将 ModalComponent 绑定到您使用 Injectable 助手装饰的根级组件。我计划很快添加这个用例的示例。它甚至支持自然道具传递，以及所有各种组件类型，即 stateless/class.
有关详细信息，请参阅 https://github.com/ctrlplusb/react-injectables。