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

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

Answer 2

确定。我找到了解决方案。根本不需要这个继承，而是使用EventManager提交所有实例都听过的事件（呃！）。因此，对于那些寻找灵活（和工作）反应对话窗口的人，您应该能够找到它here。（尽管大多数学分转到minutemailer）

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

2 个答案: