Как сделать реагирующий ремешок модальным с динамическим контентом c с изменяемым размером и перетаскиванием?

Question

Я хочу сделать реактивную ленту модальной с динамическим c контентом из другого компонента, с изменяемым размером и возможностью перетаскивания.

Мой код:

    <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> до <Draggable> они оба создают пространство даже до того, как модал был открыт, и после открытия изменяемого размера не работает.

Я поставил тег <Resizable> после <Draggable>, изменяемый размер не работает.

Answer 1

Я не нашел полного ответа, поэтому я решил удалить Draggable и просто добавить Resizable к модалу, поэтому я добавил этот код CSS к модалу:

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