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

Question

我想使用来自另一个组件的可调整大小和可拖动的动态内容使 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 but I have a problem with the resizable. I have used react-resizable and re-resizable 实现了可拖动，但是如果 <Resizable> 标签在 <Draggable> 之前，它们甚至在模式打开之前和之后都创建了 space打开 Resizable 无效。

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

Answer 1

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

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

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

How to make reactstrap modal with dynamic content resizable and draggable?

javascript

draggable

resizable

reactjs

reactstrap