React JS实现点击列表项将其移至列表首位的解决方案

核心实现逻辑 #

• 遵循React单向数据流规则，不直接修改props传入的数组，通过组件内部useState维护可变更的列表状态，初始值直接取传入的items参数即可
• 点击列表项时，从当前状态数组中取出被点击的元素，过滤掉原位置的该元素后，将其插入到数组首位，更新状态触发重渲染
• 列表渲染时绑定唯一key，添加点击事件监听，默认用ul标签渲染原生圆点列表

完整可运行代码示例 #

import { useState } from 'react';

// List组件实现
const List = ({ items: initialItems }) => {
  // 初始化内部列表状态，不直接操作props
  const [listData, setListData] = useState(initialItems);

  // 列表项点击处理逻辑
  const moveItemToTop = (clickIndex) => {
    setListData(prevList => {
      const targetItem = prevList[clickIndex];
      // 过滤掉被点击的当前项，剩余项保持原有相对顺序
      const remainItems = prevList.filter((_, index) => index !== clickIndex);
      // 返回新数组：被点击项在首位，拼接剩余项
      return [targetItem, ...remainItems];
    });
  };

  return (
    <ul>
      {listData.map((item, index) => (
        <li
          key={typeof item === 'object' ? item.id : item}
          onClick={() => moveItemToTop(index)}
          style={{ cursor: 'pointer' }}
        >
          {typeof item === 'object' ? item.text : item}
        </li>
      ))}
    </ul>
  );
};

// 组件调用（和你给出的调用写法完全兼容）
export default function App() {
  return <List items={["A", "B", "C"]} />;
}

效果说明 #

• 初始加载时自动按传入顺序A、B、C渲染圆点列表
• 点击任意列表项（比如点击B），会自动重排数组为["B", "A", "C"]，页面同步更新渲染顺序
• 代码同时兼容纯字符串数组、带唯一id的对象数组两种传参格式，适配更复杂的业务场景

内容的提问来源于stack exchange，提问作者Aabhas Jain