如何创建一个达到组件/ 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 回答
我将最好地留给反应文档 . 如果您必须埋藏React元素,这些元素需要与其父子项之外的其他元素进行通信,或者甚至可能是祖父母,而不是看下面的内容 .
https://facebook.github.io/react/tips/communicate-between-components.html
我写了一个图书馆来帮助解决这个问题 . 我避免使用Portal策略所使用的DOM插入黑客,而是利用基于上下文的注册表将组件从源传递到目标 .
我的实现使用标准的React渲染周期 . 传送/注入/传输的组件不会在目标上产生双重渲染周期 - 一切都是同步发生的 .
API的结构也可以阻止在代码中使用魔术字符串来定义源/目标 . 相反,您需要显式创建和装饰将用作目标(可注入)和源(注入器)的组件 . 由于这种事情通常被认为是非常神奇的,我认为显式的组件表示(需要直接导入和使用)可能有助于缓解组件注入位置的混淆 .
您可以完全使用我的库将ModalComponent绑定到使用Injectable帮助程序装饰的根级别组件 . 我计划很快添加一个这个用例的例子 . 它甚至支持自然道具传递,以及所有各种组件类型,即无状态/类 .
有关详细信息,请参阅https://github.com/ctrlplusb/react-injectables .