React 可排序排序问题答案

【问题标题】：React Sortable Ordering IssueReact 可排序排序问题
【发布时间】：2017-07-03 14:51:18
【问题描述】：

正如您在 GIF 中看到的，在对列表中的项目进行排序时，占位符元素似乎与其他元素重叠。我的代码逻辑与example相当。

灰色背景是绝对定位的元素。

这是我的实际代码：

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'}
/>

【问题讨论】：

标签： reactjs react-sortable-hoc

【解决方案1】：

当我在绝对定位元素中使用可排序组件时，它需要对容器的引用。添加 getContainer 道具解决了我的问题：

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

【讨论】：