react-sortable-hoc中li选中样式

在react-sortable-hoc中，当我们拖动和排序列表项时，我们可能需要添加一些样式来指示当前拖动的列表项。我们可以使用`SortableElement`高阶组件的`isDragging`属性来实现这一点。

例如，我们可以创建一个新组件来代替默认的`SortableItem`，并在该组件中添加一个类名来指示当前拖动的列表项：

const SortableItem = SortableElement(({value, isDragging, className}) => (
  <li className={className}>{value}</li>
));

const MyComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const onSortEnd = ({oldIndex, newIndex}) => {
    setItems(arrayMove(items, oldIndex, newIndex));
  };

  const getClassNamesForItem = (index, isDragging) => {
    const baseClass = "sortable-item";
    if (isDragging) {
      return `${baseClass} dragging`;
    } else {
      return baseClass;
    }
  };

  return (
    <SortableList
      items={items}
      onSortEnd={onSortEnd}
      axis="x"
      helperClass="sortable-helper"
      itemClass={getClassNamesForItem}
      renderItem={(value, index) => (
        <SortableItem
          index={index}
          value={value}
          className={getClassNamesForItem(index)}
          isDragging={isDragging}
        />
      )}
    />
  );
};

在这个例子中，我们为`SortableItem`组件添加了一个`className`属性，并在`getClassNamesForItem`函数中根据`isDragging`属性来决定是否添加一个`dragging`类名。然后，我们通过将`itemClass`属性设置为`getClassNamesForItem`函数来将该类名传递给`SortableList`组件。最后，我们在`renderItem`函数中将`isDragging`属性传递给`SortableItem`组件。