Question

我有一个HTML页面，其中包含两个单独的webpack生成的React包，每个包含自己的index.js条目文件，只需将RenderDOM.render()的相应组件<div>添加到其各自的<!doctype html> <html lang="en"> <head> <link href="stylesheets/styles.css" rel="stylesheet"> </head> <body> <div> <div id="retrieveBtn" style="border: 1px solid black; padding: 5px; width: 10%"> Recuperar Presupuesto </div> <div id="lightbox-portal" style="display: none; border: 1px solid grey"> <div id="react-retrieve"></div> </div> </div> <section class="tariff"> <div id="react-main" class="tariff__content fadeIn js-animated"></div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/eco/econonrps_vflx/build/static/js/main_bundle.js"></script> <script src="/eco/retrieve_vflx/build/static/js/retrieve_bundle.js"></script> </body> </html> }。

<div id="uxvida-retrieve"></div>

当显示id="react-retrieve"并输入数据时，我们会收到包含各种数据的AJAX响应。

我们尝试了这一点：在页面加载时，每个组件都会被呈现，我们会收到数据，并且从附加到ReactDOM.render()的组件中我们会执行另一个id="react-main"到ReactDOM.render()。

这会产生很多耦合，并且构造函数会再次被调用，而我并不想要它。

简而言之，如何在不再调用import matplotlib as mpl import matplotlib.font_manager as fm path_font = 'D:\\myfonts\\' font_dirs = [path_font + 'CustomSansPro\\', ] font_files = fm.findSystemFonts(fontpaths=font_dirs) font_list = fm.createFontList(font_files) fm.fontManager.ttflist.extend(font_list) mpl.rcParams['font.family'] = 'Custom Sans Pro'的情况下将该数据传递给其他React Component / App？

Answer 1

我认为localStorage是答案。我在这里遇到了使用微前端架构时共享数据的完全相同的问题。我目前正在使用localstorage，这似乎是完美的解决方案，可在不出现竞争条件的情况下提供数据可用性。

要考虑的事项： 1. localStorage数据始终存储为字符串。 2.在保存结构化JSON对象时，进行字符串化并在检索解析之后。 3.尝试保存涉及脚本等不易字符串化的动态数据时，这可能会成为错误的选择。 4.将其保存在全局变量中并延迟react应用程序初始化，直到该变量可供应用程序使用为止是一个不错的选择。这可以通过递归函数调用或超时来完成，同时从全局变量中检索数据。

let data = false; // tmp global var consisting data.
const getData = ()=>{
  if(!data){
    setTimeout(()=>{getData()},100)  // timeout simply to be considerate
  }
}

欢呼。

Answer 2

如果我找到了你，那么你有2个独立的反应贴片可以渲染到同一页面。如果是这样，为什么您只能管理一个应用程序呢？

无论如何，我建议合并2个应用程序，或更改服务器Api调用：服务器只能返回增量数据，我的意思是仅与同一用户/令牌的最后一次调用有所不同。

Answer 3

很老的问题，但我遇到了同样的问题。我在一页中嵌入了 2 个组件（单独的反应应用程序）。其中一个组件发送 Ajax 请求，第二个组件必须在第一个组件收到响应后做某事。

我用 CustomEvents https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events 解决了这个问题。只需在第一个组件获取结果后，它就会发送另一个组件正在监听的自定义事件。

我不是前端开发人员，所以不确定这是否是处理问题的正确方法，但对我来说似乎是一个很好的解决方案。

在两个不相关的React应用之间传递数据

3 个答案: