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

我想使用一个名为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),
    }));
};

const SortableItem=SortableElement（（{value}）=>
{value}
）；
const SortableList=SortableContainer（（{items}）=>{
返回(

{items.map（（值，索引）=>(
))}

);
});
const onSortEnd=（{oldIndex，newIndex}）=>{
this.setState（（{items}）=>({
项目：arrayMove（项目、旧索引、新索引），
}));
};

在本例中，他们将其从以下状态映射：

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>
);

返回(
{items.map（（值，索引）=>(
))}
);

但在我的例子中，我使用“地图”浏览我的状态项（星际飞船），并生成如下数据：

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>
);

const-Ship=（{Ship:{ShipId，ShipName}}）=>(
{ShipNameName}
);

我不知道如何使用这个库来设置我的应用程序

有人这样用过吗

---

谢谢

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

const{SortableContainer，SortableElement}=SortableHOC；
常量arrayMoveMutate=（数组、从、到）=>{
阵列拼接(
至<0？数组长度+至：至，
0,
阵列拼接（从，1）[0]
);
};
常量arrayMove=（数组、从、到）=>{
array=array.slice（）；
arrayMoveMutate（数组、从、到）；
返回数组；
};
函数App（）{
常量[船舶，固定船舶]=React.useState([
{ShipName:'shipA'，ShipId:1}，
{船名：'船b'，船ID:2}，
{ShipName:'shipC'，ShipId:3}，
]);
const onSortEnd=React.useCallback(
（{oldIndex，newIndex}）=>{
设置船舶（船舶=>
arrayMove（船舶、旧索引、新索引）
);
},
[]
);
返回(
);
}
const SortableList=SortableContainer（（{items}）=>{
返回(

{items.map（（发货，索引）=>(
))}

);
});
const Ship=可排序元素(
（{value}）=>
{value.ShipName}
);
ReactDOM.render（，document.getElementById（'root'））

感谢您提供的代码示例！您拥有的arrayMove函数是否与可以通过npm安装的arrayMove库中的函数相同，还是自定义的？感谢you@SkyeBoniwell他们是。不确定创建对只有几行代码的东西的依赖性是否是一个好主意，感觉就像使用LeftPadThank！我不得不稍微修改一下，但效果不错！