IE 11中的react-sortable-hoc问题

Question

我使用排序库：https://github.com/clauderic/react-sortable-hoc我使用基本示例：

​

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) => (
  <li tabIndex={0}>{value}</li>
));

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

export default SortableComponent;

​

但它不能在我的IE中工作。项目被渲染，但在按键或拖动时没有任何反应。我使用的是最新版本的库。此外，我的react应用程序在jquery基础应用程序的页面中呈现。这会是个问题吗？但仅适用于IE。不确定是否有什么东西阻塞了库。

有没有人遇到过同样的问题？

Answer 1

您需要添加一些多边形填充，才能使该库在ie11中工作。以下是需要添加的polyfill代码的链接。

Array.find：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill

Array.from：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill

另外，您使用的是哪个版本？我在1.0.0版本中使用了polyfills，它工作得很好。对于较新的版本，我无法使其工作，也没有得到任何错误。

参考：https://github.com/clauderic/react-sortable-hoc/issues/450