使用 React 排序库对 React 元素进行排序

Question

我想使用一个名为 React Sortable HOC 的 React 排序库。这似乎是一个很棒的库，但我在尝试弄清楚如何在我的实例中使用它时遇到了麻烦。

我按照他们提供的示例之一进行设置：

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

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

const onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
        items: arrayMove(items, oldIndex, newIndex),
    }));
};

在示例中，他们从状态映射如下：

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

但就我而言，我正在使用“地图”来查看我的状态项（星舰）并生成如下数据：

return (
   <div>
      {starships.map((starShip) => (
                <Ship starShip={starShip} />
      ))}
   </div>
);

Ship 在哪里是这个元素：

const Ship = ({ ship: { ShipId, ShipName } }) => (
    <tr key={ShipId}>
        <td>{ShipNameName}</td>
    </tr>
);

我不知道如何以我设置应用程序的方式使用这个库。

有人这样用过吗？

谢谢！

Answer 1

这是一个如何使用它的示例：

const { SortableContainer, SortableElement } = SortableHOC;
const arrayMoveMutate = (array, from, to) => {
  array.splice(
    to < 0 ? array.length + to : to,
    0,
    array.splice(from, 1)[0]
  );
};

const arrayMove = (array, from, to) => {
  array = array.slice();
  arrayMoveMutate(array, from, to);
  return array;
};
function App() {
  const [ships, setShips] = React.useState([
    { ShipName: 'ship a', ShipId: 1 },
    { ShipName: 'ship b', ShipId: 2 },
    { ShipName: 'ship c', ShipId: 3 },
  ]);
  const onSortEnd = React.useCallback(
    ({ oldIndex, newIndex }) => {
      setShips(ships =>
        arrayMove(ships, oldIndex, newIndex)
      );
    },
    []
  );

  return (
    <SortableList items={ships} onSortEnd={onSortEnd} />
  );
}
const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((ship, index) => (
        <Ship
          key={ship.ShipId}
          index={index}
          value={ship}
        />
      ))}
    </ul>
  );
});

const Ship = SortableElement(
  ({ value }) => <li>{value.ShipName}</li>
);
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-sortable-hoc/0.9.0/react-sortable-hoc.min.js"></script>