时间戳

首页 > 解决方案 > 调整 react-beautiful-dnd 的大小

reactjs - 调整 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

标签： reactjsreact-beautiful-dnd

解决方案

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

 <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。

const big-Height: any = {
root: {
height: "200px"
  }
}

推荐阅读