如何使具有动态内容的reactstrap模态可调整大小和可拖动？答案

【问题标题】：How to make reactstrap modal with dynamic content resizable and draggable?如何使具有动态内容的reactstrap模态可调整大小和可拖动？
【发布时间】：2020-08-11 23:42:41
【问题描述】：

我想使用来自另一个组件的动态内容制作 reactstrap 模态，该模态可调整大小和可拖动。

我的代码：

    <Draggable>
      <Modal isOpen={modal} toggle={this.toggle}>
        <ModalHeader toggle={this.toggle}>Add/Edit</ModalHeader>
        {modal ?
          <ModalBody>
            {this.props.dynamicComponent}
          </ModalBody> : ''}
      </Modal>
    </Draggable>

我已经通过使用react-draggable 实现了可拖动，但我在调整大小时遇到了问题。我使用过react-resizable 和re-resizable，但是如果<Resizable> 之前的<Resizable> 标记在<Draggable> 之前它们都创建了空间，甚至在打开模式之前和打开Resizable 之后都不起作用。

我已将<Resizable> 标签放在<Draggable> 之后，Resizable 不起作用。

【问题讨论】：

标签： javascript reactjs draggable reactstrap resizable

【解决方案1】：

我没有找到完整的答案，所以我决定删除 Draggable 并只将 Resizable 添加到 Modal 中，因此我将这段 CSS 代码添加到了 modal 中：

.modal-content{
border: 2px solid;
resize: both;
overflow: auto;}

【讨论】：