ReactJs中的可重用模式

Question

我正在嘗試創建一個服務，該服務將顯示“確認對話框”並捕獲用戶的操作（“確認” /“取消”），並且可以以更少的嘗試在任何組件中重用。

到目前為止我嘗試過的（使用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;

然后在我的組件中，將其注入render()函數：

...
{
   _this.state.isOpen && _this.confirmable
}

每當我需要顯示確認模態時，我都會打電話給

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因此不會呈現它。 這有點作弊，而且似乎不是關閉Dialog的本機方法（丟失動畫，看起來很奇怪...）。

那么如何在對對話框具有完全控制權的情況下實現服務？

謝謝！

Answer 1

 var Modal = React.createClass({ displayName: 'Modal', backdrop: function() { return <div className='modal-backdrop in' />; }, modal: function() { var style = {display: 'block'}; return ( <div className='modal in' tabIndex='-1' role='dialog' aria-hidden='false' ref='modal' style={style} > <div className='modal-dialog'> <div className='modal-content'> {this.props.children} </div> </div> </div> ); }, render: function() { return ( <div> {this.backdrop()} {this.modal()} </div> ); } }); var Confirm = React.createClass({ displayName: 'Confirm', getDefaultProps: function() { return { confirmLabel: 'OK', abortLabel: 'Cancel' }; }, abort: function() { return this.promise.reject(); }, confirm: function() { return this.promise.resolve(); }, componentDidMount: function() { this.promise = new $.Deferred(); return React.findDOMNode(this.refs.confirm).focus(); }, render: function() { var modalBody; if (this.props.description) { modalBody = ( <div className='modal-body'> {this.props.description} </div> ); } return ( <Modal> <div className='modal-header'> <h4 className='modal-title'> {this.props.message} </h4> </div> {modalBody} <div className='modal-footer'> <div className='text-right'> <button role='abort' type='button' className='btn btn-default' onClick={this.abort} > {this.props.abortLabel} </button> {' '} <button role='confirm' type='button' className='btn btn-primary' ref='confirm' onClick={this.confirm} > {this.props.confirmLabel} </button> </div> </div> </Modal> ); } }); var confirm = function(message, options) { var cleanup, component, props, wrapper; if (options == null) { options = {}; } props = $.extend({ message: message }, options); wrapper = document.body.appendChild(document.createElement('div')); component = React.render(<Confirm {...props}/>, wrapper); cleanup = function() { React.unmountComponentAtNode(wrapper); return setTimeout(function() { return wrapper.remove(); }); }; return component.promise.always(cleanup).promise(); }; $(function() { return $('.removable').click(function() { return confirm('Are you sure?', { description: 'Would you like to remove this item from the list?', confirmLabel: 'Yes', abortLabel: 'No' }).then((function(_this) { return function() { return $(_this).parent().remove(); }; })(this)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <div id="row"> <div class="well"> <ul> <li>Foo <a href="#" class="removable"><i class="glyphicon glyphicon-trash"></i></a></li> <li>Bar <a href="#" class="removable"><i class="glyphicon glyphicon-trash"></i></a></li> <li>Baz <a href="#" class="removable"><i class="glyphicon glyphicon-trash"></i></a></li> </ul> </div> </div>