调整 react-beautiful-dnd 的大小答案

【问题标题】：Resize react-beautiful-dnd调整 react-beautiful-dnd 的大小
【发布时间】：2020-04-04 06:33:54
【问题描述】：

是否可以调整可放置容器的高度？我尝试了内联样式

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

但没有产生预期的结果。我的期望是容纳可拖动项目的容器可以调整到一定的高度 x 并且可拖动项目的溢出将是可滚动的。我还尝试使用以下div 标签包装<DragDropContext onDragEnd={this.onDragEnd}>：

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

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

【问题讨论】：

标签： reactjs react-beautiful-dnd

【解决方案1】：

您也可以提供内联样式和条件样式。如下代码所示，它的内联样式。

 <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"
  }
}

【讨论】：