react-beautiful-dnd - 拖动元素时出现奇怪的样式

Question

使用react-beautiful-dnd 库，在拖动元素时（在放下它之前），我的列上会出现一个奇怪的黑点。

例如：

Answer 1

这是因为当您拖动一个元素时，{provided.placeholder} 会被激活，然后在 DOM 上插入一个元素，该元素可能是“li”、“div”等。根据您的标记。

<Droppable droppableId="droppable-1">
  {(provided, snapshot) => (
  <div ref={provided.innerRef} {...provided.droppableProps}>
     <li>
       My element
     </li>
    {provided.placeholder}
 </div>

  )}
</Droppable>

因此解决方案是您需要设置影响自动插入元素的样式（或删除样式）。

可能是一个css类，如：

li {
    list-style: none;
}

将删除黑点，因为它会影响{provided.placeholder} 元素（如果它是“li”）。