在相关商店的页面中使用多个 React 应用程序

Question

我在 React 中有一个评论应用程序：

require('console-polyfill')
import 'babel-polyfill'
import React from 'react'
import ReactDOM from "react-dom"
import App from "./app/app.js"
import { makeid } from "shared/services/helpers.js"
import { Provider } from "react-redux"
import store from "./app/services/store.js"
require('./app/scss/main.scss')

window.R_loadReactComment = function(element){
    new ReactDOM.render(<Provider store={store}><App /></Provider>, element);
}

在模板文件中，我可以像这样在调用时呈现此应用程序：

$(function(){
        if($(".ordered_react_comment").length){
            var elements = document.getElementsByClassName("ordered_react_comment");
            for (var x = 0; x < elements.length; x++)
                window.R_loadReactComment(elements[x]);
        }
    })

它按预期呈现，但是当我单击按钮以显示评论应用程序时，此评论应用程序的所有反应实例都会显示！我猜最有可能的原因是因为他们都在共享和改变同一个商店。我不希望这种情况发生，我希望每个 React 应用程序都有自己的商店。我怎样才能让每个应用程序都有自己的商店（如果这是这里的问题）。

Answer 1

JavaScript 模块是单例。您可以阅读更多内容 here。

Modules are singletons. Even if a module is imported multiple times, only a single “instance” of it exists.

因此 import store from "./app/services/store.js" 每次都给你相同的商店。

为避免这种情况，导入一个创建商店实例的函数，并将一个实例传递给您的提供商。

目前举个例子，你的店铺大概是这样的

// create store

export default store;

你需要将这个包装在函数中，return那个函数。

function getNewStore() {
  // create store
  return store
}

export default getNewStore;

现在您每次都可以使用这个功能来创建一个新的商店实例。

import getNewStore from "./app/services/store.js"

//...

window.R_loadReactComment = function(element){
    const store = getNewStore();
    new ReactDOM.render(<Provider store={store}><App /></Provider>, element);
}

在相关商店的页面中使用多个 React 应用程序

Using multiple react apps in page with relevant stores

store

reactjs

react-redux