Реагировать на сортируемую проблему заказа

Question

Как вы можете видеть в GIF при упорядочении элементов в списке, кажется, что элемент-заполнитель перекрывается другими. Моя логика кода вполне соответствует примеру.

Серый фон - это элемент с абсолютным позиционированием.

Это мой фактический код:

const DragHandleElement = SortableHandle(() => <span style={handleStyle} ><DragHandle /></span>);

const SortableItem = SortableElement(({content}) => {
  return (
    <div style={menuItemStyle}>
      <DragHandleElement />
      <div style={menuContentStyle}>
        {Utils.getMainDesc(content)}
      </div>
    </div>
  );
});

class VirtualList extends Component {
  render() {
    let {items} = this.props;

    return (
      <AutoSizer>
        {({ width, height }) => (
          <List
            ref={(instance) => {
              console.log(instance);
              this.List = instance;
            }}
            rowHeight={80}
            rowRenderer={({index}) => {
              let {content} = items[index];
              return <SortableItem key={'sort_item_'+index} index={index} content={content} />;
            }}
            rowCount={items.length}
            height={height}
            width={width}
          />
        )}
      </AutoSizer>
    );
  }
}

const SortableList = SortableContainer(VirtualList, {withRef: true});

<SortableList 
  ref={(instance) => {
    this.SortableList = instance;
  }}
  lockAxis='y'
  useDragHandle={true}
  items={menu.content}
  onSortEnd={({oldIndex, newIndex}) => this.props.onSortEnd(oldIndex, newIndex, this.SortableList)}
  helperClass={'higher'}
/>

Answer 1

Поскольку я использую сортируемый компонент внутри элемента с абсолютным позиционированием, ему нужна ссылка на контейнер. Добавление реквизита getContainer решило мою проблему:

<SortableList 
  ....
  getContainer={() => {
    return ReactDOM.findDOMNode(this.refs['menu'])
  }}
/>