Question

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

<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

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

调整React-beautiful-dnd的大小

1 个答案: