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

Posted 2023-05-08

【中文标题】如何使具有动态内容的reactstrap模态可调整大小和可拖动？

【英文标题】：How to make reactstrap modal with dynamic content resizable and draggable?

【发布时间】：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 不起作用。

【参考方案1】：

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

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