reactjs - 如何使react-bootstrap模式可拖动

Question

我尝试过让它发挥作用，但这就是发生的事情。

1. 使用react-draggable npm包，我能够使内容可拖动和可放置。但整个对话框的背面保持原状，之后看起来就 splinter 了。

我也在网上找到了这个 https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503 ,

import { Modal } from 'react-bootstrap'
import ModalDialog from 'react-bootstrap/lib/ModalDialog'
import Draggable from 'react-draggable'

class DraggableModalDialog extends React.Component {
    render() {
        return <Draggable handle=".modal-title"><ModalDialog 
{...this.props} /></Draggable>
    }
}

// enforceForce=false causes recursion exception otherwise....
export default ({titleIconClass, modalClass, children, title,...props}) =>
<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>
    <Modal.Header closeButton>
        <Modal.Title>
            {title}
        </Modal.Title>
    </Modal.Header>
    <Modal.Body>
        {children}
    </Modal.Body>
</Modal>

这段代码是我通过搜索得到的，实际上我无法让它工作。

<小时/>

尤其是这个，

<ModalDialog {...this.props} />

，我不明白为什么要送入 Prop ，送入什么样的 Prop 。

和

<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>

<------ {...props} 这是做什么的？它似乎没有为 Modal 提供 Prop 。其目的是什么？是否相关

"<ModalDialog {...this.props} />"

？

如果这是一部有效的作品，谁能告诉我上面两个问题如何解决？

谢谢!

Answer 1

对于那些可能仍在使用最新版本的 react-bootstrap 的人(在撰写本文时我的是 1.0.0-beta.5)。这是 ( https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503 ) 的修改版本

import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Draggable from 'react-draggable';
import ModalDialog from 'react-bootstrap/ModalDialog';

class DraggableModalDialog extends React.Component {
    render() {
        return <Draggable handle=".modal-title"><ModalDialog {...this.props} /> 
   </Draggable>
    }
}

export default class BSModal extends Component {

render() {
    return (
        <Modal
                dialogAs={DraggableModalDialog} 
                show={this.props.show} 
                onHide={this.props.close}>
            <Modal.Header>
                <Modal.Title>{this.props.title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {this.props.children}
            </Modal.Body>
            <Modal.Footer >
            </Modal.Footer>
        </Modal>
    );
}
}