首页 文章

ReactJS模态组件

提问于
浏览
3

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

莫达尔就是一个很好的例子 . 我希望在我的应用程序中从子嵌套的方式触发和控制模态,但是模态要求DOM要高得多,最有可能一直作为文档主体的子项 .

我正在考虑"portal"模式,如下所述: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中的其他地方渲染一个反应组件就好像是有点过分了 . 是否有更“实际”的方式实现这一目标?

谢谢

2 回答

  • 0

    我将最好地留给反应文档 . 如果您必须埋藏React元素,这些元素需要与其父子项之外的其他元素进行通信,或者甚至可能是祖父母,而不是看下面的内容 .

    对于没有父子关系的两个组件之间的通信,您可以设置自己的全局事件系统 . 订阅componentDidMount()中的事件,取消订阅componentWillUnmount(),并在收到事件时调用setState() .

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

  • 2

    我写了一个图书馆来帮助解决这个问题 . 我避免使用Portal策略所使用的DOM插入黑客,而是利用基于上下文的注册表将组件从源传递到目标 .

    我的实现使用标准的React渲染周期 . 传送/注入/传输的组件不会在目标上产生双重渲染周期 - 一切都是同步发生的 .

    API的结构也可以阻止在代码中使用魔术字符串来定义源/目标 . 相反,您需要显式创建和装饰将用作目标(可注入)和源(注入器)的组件 . 由于这种事情通常被认为是非常神奇的,我认为显式的组件表示(需要直接导入和使用)可能有助于缓解组件注入位置的混淆 .

    您可以完全使用我的库将ModalComponent绑定到使用Injectable帮助程序装饰的根级别组件 . 我计划很快添加一个这个用例的例子 . 它甚至支持自然道具传递,以及所有各种组件类型,即无状态/类 .

    有关详细信息,请参阅https://github.com/ctrlplusb/react-injectables .

相关问题