javascript - React 高级组件在多次使用时不会更新

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

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