Ant Design Mobile的List点击后如何保持选中高亮？

你这个写法本身没问题，问题出在状态更新后组件重新渲染时，selected 的值可能又被重置了，或者点击事件触发后，组件的内部状态覆盖了你传入的 selected 属性。

官方文档里说 List.Item 的 selected 是受控属性，意思是它只在你显式传入 true 时才高亮，传 false 或不传就恢复默认。所以你得确保状态稳定，而且别在其他地方又把 selected 改回去了。

一个常见的坑是：你可能在 onClick 里更新了 state，但这个组件是被父组件统一管理的，而父组件每次 render 都重新生成了默认的 selected 值（比如在 render() 里写 selected={this.state.selected} 但 state.selected 初始值是 undefined 或者每次点击后又重置了）。

建议你检查一下：

1. 确保 state.selected 初始化过，比如在 constructor 里设 this.state = { selected: null }；
2. 点击时别做其他重置操作；
3. 如果是列表多个项，每个 ListItem 的 selected 都要对应你 state 里的当前值。

举个完整例子：

class OrderList extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      selected: null

    };

  }



  handleSelect = (id) => {

    this.setState({ selected: id });

  };



  render() {

    return (

      <List>

        <List.Item 

          selected={this.state.selected === 'order1'} 

          onClick={() => this.handleSelect('order1')}

        >

          订单1

        </List.Item>

        <List.Item 

          selected={this.state.selected === 'order2'} 

          onClick={() => this.handleSelect('order2')}

        >

          订单2

        </List.Item>

      </List>

    );

  }

}

这样写应该能稳稳高亮，不会闪一下就没了。如果还是不行，你可能得检查下是不是用了 ant-design-mobile@2.x 的老版本，有些版本对 selected 支持有 bug，升级到最新版（比如 5.x）会更靠谱。

这个问题的关键在于 Ant Design Mobile 的 List.Item 高亮状态是通过样式控制的，而不是单纯靠 selected 属性。你现在的写法只是设置了属性，但没有真正影响到样式。

解决方法其实挺简单，用一个状态变量来记录当前选中的项，然后通过 className 动态添加样式。具体代码可以这么写：

import React, { useState } from 'react';

import { List } from 'antd-mobile';

import './custom.css'; // 自定义样式



const OrderList = () => {

  const [selected, setSelected] = useState(null);



  return (

    <List>

      {[1, 2, 3].map((item) => (

        <List.Item

          key={item}

          className={selected === item ? 'active-item' : ''}

          onClick={() => setSelected(item)}

        >

          订单{item}

        </List.Item>

      ))}

    </List>

  );

};



export default OrderList;

然后在 custom.css 里定义高亮样式：

.active-item {

  background-color: #e6f7ff; /* 蓝色背景 */

  color: #1890ff; /* 字体颜色 */

}

这里用了 React 的 hooks 来管理状态，比类组件更简洁。重点是通过 className 来控制样式，因为 Ant Design Mobile 的组件库本身并没有提供持久高亮的功能。

说实话，这种需求挺常见的，组件库不提供现成方案就得自己动手。记得把样式文件引入到项目里，不然样式是不会生效的。我以前也被这个坑过，调试了半天才发现忘记引样式文件了，真是醉了。