React High Level Component在多次使用时不会更新

Question

我一直在寻找一个使用可重用模型对话框窗口的解决方案，但在那里我可以自由地使用内容，并在React中使用了高级组件模式。如下所述：https://stackoverflow.com/a/31564812.

虽然这最初似乎是可行的，但当我使用一个包装器包装不同的东西（在不同的时间）时，我会遇到麻烦。

首先，我要：

function Dialog(Component) {
    return React.createClass({
        render: function() {
            return ( 
                <div className="wrapper"> 
                    before 
                    <Component {...this.props}/>
                    after
                </div>
            );
        }    
    });
};

module.exports = Dialog;

然后我做了：

var Dialog = require('./Dialog.jsx');
DialogContent = React.createClass({
    render: function () {
      return ( 
        <div> blah blah this is for login</div>
      )
    };
};                                      
var LoginDialogWindow = new Dialog(DialogContent);
module.exports = LoginDialogWindow;

和

 var Dialog = require('./Dialog.jsx');
 OtherContent = React.createClass({
        render: function () {
          return ( 
            <div>Jo Jo, this is something else</div>
          )
      };
  };                                      
  var OtherDialogWindow = new Dialog(OtherContent);
  module.exports = OtherDialogWindow;

然后我得到的是这两个组件共享它们的状态。当一个被定义时，另一个将显示与第一个相同的文本。我在一个函数上调用一个函数，另一个函数也被调用。我看到的是，当我打开一种风格的对话框窗口时，两种风格都出现了。

我猜这与JavaScript闭包有关，但我不知道如何实现这一点。我如何单独使用这些？

Answer 1

好啊我找到了解决办法。它与此继承完全无关，而是与一个EventManager有关，后者提交了所有实例都侦听的事件（duh！）。因此，对于那些寻找灵活（且有效）的react对话框窗口的人，您应该可以在这里找到它。（尽管大部分信用卡都归minutemailer所有）

Answer 2

删除new关键字从你的LoginDialogWindow和其他DialogWindow调用。new用于创建具有构造函数的对象的实例，这不是你想要的。