如何在Material UI List中实现自定义跳号/重编号？

要实现列表编号跳号（比如序列1,2,5,6...，跳过3、4直接从5开始延续），原生HTML里可以通过给<li>标签设置value属性实现，示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>The li value attribute</h1>

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li value="200">Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

</body>
</html>

这段代码会让列表编号从100开始自动延续；遇到value=200的项时，编号直接跳转到200，之后继续递增。

针对Material UI的List组件，一开始尝试在List的sx属性中设置value无效，查阅ListItem官方API也未找到对应配置项，最终通过直接给ListItem添加value属性，成功实现了自定义重编号效果。

Material UI的实现示例：

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

export default function CustomNumberedList() {
  return (
    <List component="ol">
      <ListItem>
        <ListItemText primary="第一项" />
      </ListItem>
      <ListItem>
        <ListItemText primary="第二项" />
      </ListItem>
      <ListItem value={5}>
        <ListItemText primary="第五项（跳过3、4）" />
      </ListItem>
      <ListItem>
        <ListItemText primary="第六项" />
      </ListItem>
    </List>
  );
}

原理很简单：Material UI的ListItem组件本质是对原生<li>标签的封装，直接传递value属性会被透传到底层DOM元素上，配合List设置component="ol"渲染为有序列表，就能实现和原生HTML一致的编号跳号效果。

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