将外部数据传递到现有的React组件

Question

我正在将React组件集成到现有网站中。我不想建立一个SPA，但是在某些区域中，更多动态元素会非常有用。

为此，我使用以下模式：

• 在自己的文件中定义单独的组件，例如Login.jsx
• 在index.jsx中，如果找到了所有的div组件，则导入所有组件。如果存在<div id="login">，请在其中渲染<Login >

我现在正尝试在几个页面上添加一些模式对话框。我采用的方法是：

• 将以下div添加到所有页面：<div id="modal" class="modal fade" tabindex="-1" role="dialog"></div>
• 创建一个Modal react组件，其中包含引导程序所需的标记
• 将react组件连接到div
• 在需要的特定页面上添加按钮：<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">

使用此设置，我只能定义一次标记，并在需要标记的页面上显示模式。我遇到的问题是，我需要根据其所在的页面（不仅是页面）来模化具有不同的内容。

我可以在window对象中存储一些全局数据，但是我发现这很丑陋。

我有什么选择将外部数据传递到现有的React组件？我也愿意接受其他选择，即使它们意味着调整我整合React的方式。

Answer 1

正如我的评论中所述，我认为实现您的想法的正确方法（如果我理解正确的话）是在单个应用中制作所有React代码，但使用Portal来将每个组件呈现为不同的元素从原始的html文件中提取（实际上，Portal链接上的示例执行的操作与您想要执行的操作类似）。

通过这种方式，您还将节省代码重复（例如，如果将每个组件完全分开，那么最终将得到所有React库和每个组件内部的其他模块），并且可以轻松访问组件方法从其他组件方法，甚至呈现在不同的元素上