Javascript ReactJs中的可重用模型

我正在尝试创建一个服务，它将显示一个确认对话框并捕获用户的操作（确认/取消），并且可以在任何组件中重复使用，而无需太多尝试

到目前为止我尝试了什么（使用

React gateway

插入我的对话框）

我创建了如下服务：

var createConfirm = function(options, onConfirm, onCancel) {
  options = options || {};
  var actions = [
    <FlatButton
      label="Cancel"
      primary={true}
      onClick={onCancel}
    />,
    <RaisedButton
      label="OK"
      primary={true}
      onClick={onConfirm}
    />,
  ];
  return (
    <Gateway into="confirm-modal">
      <Dialog
        title={options.title || 'Confirmation'}
        actions={actions}
        modal={true}
        open={true}
      >
        {options.content || 'Are you sure?'}
      </Dialog>
    </Gateway>
  )
}

export default createConfirm;

无论什么时候我需要展示，我都会打电话给你

this.confirmable = createConfirm({
  title: 'CONFIRM',
  content: 'Are you sure to do that'
}, function() {
  console.log('user confirm')
  _this.setState({
    isOpen: false
  });
}, function() {
  console.log('user cancel')
  _this.setState({
    isOpen: false
  })
});
this.setState({isOpen: true});

我的问题

如您所见，我关闭确认对话框所做的操作是将

isOpen

状态设置为

false

，这样它就不会被渲染。这是一个小骗局，似乎不是关闭对话框的原生方式（失去动画，看起来很奇怪…）

那么，如何实现对对话框具有完全控制权的服务呢

谢谢大家!

var Modal=React.createClass({
displayName:'Modal'，
背景：函数（）{
返回；
},
模态：函数（）{
var style={display:'block'}；
返回(
{this.props.children}
);
},
render:function（）{
返回(
{this.background（）}
{this.modal（）}
);
}
});
var Confirm=React.createClass({
displayName:“确认”，
getDefaultProps:function（）{
返回{
confirmLabel:'确定'，
abortLabel:“取消”
};
},
中止：函数（）{
退回这个。承诺。拒绝（）；
},
确认：函数（）{
返回此。promise.resolve（）；
},
componentDidMount:function（）{
this.promise=new$.Deferred（）；
返回React.findDOMNode（this.refs.confirm.focus（）；
},
render:function（）{
var modalBody；
如果（本道具说明）{
模态体=(
{this.props.description}
);
}
返回(
{this.props.message}
{modalBody}
{this.props.abortLabel}
{' '}
{this.props.confirmLabel}
);
}
});
var确认=功能（消息、选项）{
var清理、组件、道具、包装器；
如果（选项==null）{
选项={}；
}
道具=$.extend({
信息：信息
}，选项）；
包装器=document.body.appendChild（document.createElement（'div'）；
component=React.render（，包装器）；
cleanup=函数（）{
React.unmountComponentAtNode（包装器）；
返回setTimeout（函数（）{
返回wrapper.remove（）；
});
};
返回component.promise.always（cleanup.promise（）；
};
$（函数（）{
返回$（'.removable'）。单击（函数（）{
返回确认（'您确定吗？'{
描述：“是否要从列表中删除此项目？”，
confirmLabel:'是'，
abortLabel:“否”
}).然后（（函数（_this）{
返回函数（）{
返回$（_this）.parent（）.remove（）；
};
})(本);；
});
});


福
酒吧
巴兹

关闭对话框/模式的方法：
包装器.remove（）
也与我的方法类似，即从DOM节点中删除模式，而不是实际关闭它。我想问的是一种完全控制模态的方法。
this.confirmable = createConfirm({
  title: 'CONFIRM',
  content: 'Are you sure to do that'
}, function() {
  console.log('user confirm')
  _this.setState({
    isOpen: false
  });
}, function() {
  console.log('user cancel')
  _this.setState({
    isOpen: false
  })
});
this.setState({isOpen: true});