Изменить размер react-beautiful-dnd

Можно ли отрегулировать высоту контейнера для бросания? Я попробовал встроенный стиль

<Droppable droppableId="list" style={{ height: 200 }}>

но не дало ожидаемых результатов. Я ожидаю, что контейнер, содержащий перетаскиваемые элементы, можно будет отрегулировать до определенной высоты x, а переполнение перетаскиваемых элементов будет прокручиваемым. Я также пробовал обернуть <DragDropContext onDragEnd={this.onDragEnd}> следующим тегом div:

<div style={{ height: 200 }}>

https://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-qnez5


reactjs react-beautiful-dnd
person Snoopy    schedule 11.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы также можете указать встроенные стили и условные стили. Как показано в коде ниже, его встроенный стиль.

 <Droppable
         droppableId={`${laneItem.Value}`}
         type="TASK"
         key={`droppable-${laneItem.Value}`}
       >
       {(provided) => (
           <div
              id={laneItem.Value}
              ref={provided.innerRef}
              {...provided.droppableProps}
              key={`droppable-div-${laneItem.Value} - ${index + 1}`}
              style={{ height: '200px' }}
        >

Вот это условная укладка,

 <Droppable
         droppableId={`${laneItem.Value}`}
         type="TASK"
         key={`droppable-${laneItem.Value}`}
       >
       {(provided) => (
           <div
              id={laneItem.Value}
              ref={provided.innerRef}
              {...provided.droppableProps}
              key={`droppable-div-${laneItem.Value} - ${index + 1}`}
              styles={true ? bigHeight : smallHeight}
        >

где big-Height и small-Height являются постоянными.

const big-Height: any = {
root: {
height: "200px"
  }
}
person Community    schedule 31.03.2020