Javascript 单击ReactJs重新排序项目（从左到右）

在下面的代码中，我从下到上或从上到下重新组织了一个列表

我宁愿能够从左到右重新组织它

你知道怎么做吗

应用程序

import React，{Component}来自“React”；
从“/FruitList”导入结果列表；
const UP=-1；
常数向下=1；
类应用程序扩展了React.Component{
状态={
//为绑定键项设置新状态
项目：[
{id:1，名称：“橙色”，bgColor:#f9cb9c}，
{id:2，名字：“lemon”，bgColor:#fee599}，
{id:3，名称：“草莓”，bgColor:#e066666}
]
};
手柄移动=（id，方向）=>{
const{items}=this.state；
const position=items.findIndex（i=>i.id==id）；
如果（位置<0）{
抛出新错误（“未找到给定项”）；
}否则如果(
（方向===向上和位置===0）||
（方向===向下和位置===项目长度-1）
) {
return；//不能移出数组
}
const item=items[position]；//保存项目供以后使用
const newItems=items.filter（i=>i.id！==id）；//从数组中删除项
新项目。拼接（位置+方向，0，项目）；
this.setState（{items:newItems}）；
};
render（）{
返回；
}
}
导出默认应用程序；

我的组件

import React, { Component } from "react";
const UP = -1;
const DOWN = 1;
class FruitList extends React.Component {
  render() {
    const { fruitList, onMove } = this.props;

    return (
      <div>
        {fruitList.map(item => (
          <div key={item.id} style={{ backgroundColor: item.bgColor }}>
            <div className="fruitsId">{item.id}</div>
            <div className="fruitsName">{item.name}</div>
            <div className="fruitsArrows">
              <a onClick={() => onMove(item.id, UP)}>&#x25B2;</a>
              <a onClick={() => onMove(item.id, DOWN)}>&#x25BC;</a>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

export default FruitList;

import React，{Component}来自“React”；
const UP=-1；
常数向下=1；
类水果列表扩展了React.Component{
render（）{
const{fruitList，onMove}=this.props；
返回(
{fruitList.map（项=>(
{item.id}
{item.name}
onMove（item.id，UP）}>&x25B2；
onMove（item.id，DOWN）>&x25BC；
))}
);
}
}
导出默认结果列表；

您可以使用css flexbox执行此操作

我将

{display:“flex”}

应用于水果列表中的根div。（方向为默认行）

FruitList.js

类水果列表扩展了React.Component{
render（）{
const{fruitList，onMove}=this.props；
返回(
{fruitList.map（项=>(
从左到右移动项目是什么意思？我的意思是，如果你更改索引，项目只会向上或向下移动？你能详细说明一下你的用例是什么吗？@Mohammadaseb是的，当然，那么我希望它的反应与从上到下完全相同，只是从左到右我给你链接了一张照片，以便更好地理解它只需设置样式就足够了？有序列表上下或左/右没有区别。索引不知道方向？只需使用css（flexbox，orientation）将其水平放置？还是我没有抓住要点？
import React, { Component } from "react";
const UP = -1;
const DOWN = 1;
class FruitList extends React.Component {
  render() {
    const { fruitList, onMove } = this.props;

    return (
      <div>
        {fruitList.map(item => (
          <div key={item.id} style={{ backgroundColor: item.bgColor }}>
            <div className="fruitsId">{item.id}</div>
            <div className="fruitsName">{item.name}</div>
            <div className="fruitsArrows">
              <a onClick={() => onMove(item.id, UP)}>&#x25B2;</a>
              <a onClick={() => onMove(item.id, DOWN)}>&#x25BC;</a>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

export default FruitList;