React TypeScript：限制组件仅接受ListItem/Divider并添加key

一、编译阶段强制additionalMenuItems仅接受Divider或ListItem组件 #

你当前的Props定义存在类型匹配偏差：(typeof Divider | typeof ListItem)[]指向的是组件构造函数类型，但实际传入的是JSX元素实例（即React.ReactElement）。修正类型定义后，TypeScript会在编译阶段直接校验传入元素的合法性：

// demo.tsx
import * as React from "react";
import ListItem from "@mui/material/ListItem";
import Divider from "@mui/material/Divider";

interface Props {
  // 限定数组元素为Divider或ListItem的JSX实例
  additionalMenuItems: Array<
    React.ReactElement<typeof Divider> | React.ReactElement<typeof ListItem>
  >;
}

修改后，若父组件传入非Divider/ListItem的元素，TypeScript会立刻抛出编译错误，完全无需运行时校验逻辑。

二、渲染列表时添加key #

React要求列表渲染的每个元素必须有唯一key属性，推荐两种实现方式：

方式1：父组件传入时直接指定key #

父组件更清楚每个列表项的唯一标识，优先在传入阶段添加key是最优解：

// index.tsx
<Demo
  additionalMenuItems={[
    <ListItem key="menu-car" disablePadding>
      <ListItemButton>
        <ListItemText primary="Car" />
      </ListItemButton>
    </ListItem>,
    <Divider key="menu-divider-1" />,
    <ListItem key="menu-bike" disablePadding>
      <ListItemButton>
        <ListItemText primary="Bike" />
      </ListItemButton>
    </ListItem>
  ]}
/>

方式2：子组件统一处理key（兜底方案） #

如果父组件未传入key，子组件可通过React.cloneElement添加兜底key（注意：索引作为key仅适合完全静态的列表，若列表有增删、排序操作，会引发React组件复用错误）：

// demo.tsx
const BasicList = (props: Props) => {
  return (
    <Box sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
      {/* 原有代码省略 */}
      <nav aria-label="secondary mailbox folders">
        <List>
          {/* 原有列表项 */}
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemText primary="Trash" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemText primary="Spam" />
            </ListItemButton>
          </ListItem>
          {/* 遍历并添加key */}
          {props.additionalMenuItems.map((item, index) =>
            React.cloneElement(item, {
              key: item.key || `additional-item-${index}`
            })
          )}
        </List>
      </nav>
    </Box>
  );
};

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