IE 11 中的 react-sortable-hoc 问题答案

【问题标题】：Issue with react-sortable-hoc in IE 11IE 11 中的 react-sortable-hoc 问题
【发布时间】：2020-06-07 22:03:16
【问题描述】：

我使用排序库：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 中唤醒。项目被渲染，但在 keydown 或拖动时没有任何反应。我正在使用最新版本的库。我的反应应用程序也呈现在 jquery 基础应用程序的页面中。这可能是问题吗？但仅适用于 IE。不确定是否有东西阻塞了库。

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

【问题讨论】：

标签： reactjs react-sortable-hoc

【解决方案1】：

您需要添加一些 polyfill 以使该库在 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 版本的 polyfill，它运行良好。对于较新的版本，我无法使其正常工作，也没有出现任何错误。

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

【讨论】：