使用 react-sortable-hoc 拖动时丢失 tr 元素的样式答案

【问题标题】：Losing style of tr element when being dragged with react-sortable-hoc使用 react-sortable-hoc 拖动时丢失 tr 元素的样式
【发布时间】：2020-05-22 08:42:08
【问题描述】：

我的问题是拖动时所选元素的样式丢失了。我正在使用 react-sortable-hoc 库，它没有提供相关信息。他们的例子没有这个问题。样式始终与原始项目相同。

<tbody>
    {items.map((value, index) => (
    <SortableItem key={`item-${value.code}`} index={index} sortIndex={index} value={value} />
    ))}
</tbody>

const SortableItem = SortableElement(({value, sortIndex}) => (
        <tr>
            <DragHandle sortIndex={sortIndex}/>
            <td>{value.label}</td>
            <td>{value.beta.toString()}</td>
            <td>{value.prod.toString()}</td>
            <td>{value.hidden.toString()}</td>
        </tr>
    ));

        const DragHandle = SortableHandle(({sortIndex}) => <td>{sortIndex}</td>);

这是我选择并拖动元素之前的列表。

这是我选择并开始拖动第一个元素时的列表。

【问题讨论】：

标签： reactjs react-sortable-hoc

【解决方案1】：

对我来说，问题在于 CSS 层次结构和特殊性，我正在定义与父项相关的项目样式。像这样：

.list .item{
...
}

但是在拖动项目时，该元素不再链接到父类，而是父类之外的单独元素。因此它失去了所有的造型！因此，为了解决这个问题，我们可以像这样全局定义项目和父样式：

.list{
...
}

.item{
...
}

【讨论】：