Question

我有一个评论应用程序：

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]);
        }
    })

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

Answer 1

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

模块是单身人士。即使多次导入模块，只存在一个“实例”。

因为这个import store from "./app/services/store.js"每次都给你同样的商店。

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

目前，您的商店可能就是这样。

// create store

export default store;

你需要在函数中包装它并返回该函数。

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);
}

在相关商店的页面中使用多个反应应用

1 个答案: