React+Material-UI中，如何正确传递自定义多Props并消除警告？

问题出在你把自定义的onItemClick和items与Drawer的原生props混在一起传递给了MUI的Drawer组件，React会把这些自定义props当成DOM元素的事件处理属性，而DOM元素并没有onItemClick这个属性，所以抛出警告。

正确的做法是解构分离自定义props和Drawer原生props，只把Drawer需要的属性传递给它：

步骤1：定义扩展的Props接口 #

import { DrawerProps } from '@mui/material/Drawer';

interface Props extends DrawerProps {
  items: string;
  onItemClick: (nr: number) => void;
}

步骤2：在组件内部分解props #

在组件里把自定义的items、onItemClick解构出来，剩下的属性（均为Drawer所需）用rest接收，再传递给Drawer组件：

export default function Navigator({ items, onItemClick, ...rest }: Props) {
  // 这里可使用items和onItemClick实现你的导航逻辑
  return (
    <Drawer {...rest}>
      {/* 示例：渲染导航项并绑定点击事件 */}
      <div className="nav-item" onClick={() => onItemClick(1)}>
        {items}
      </div>
    </Drawer>
  );
}

为什么这样能消除警告？ #

通过解构操作，自定义的items和onItemClick不会被传递给Drawer组件，自然也不会被传到Drawer渲染的DOM元素上，React就不会把它们判定为无效的DOM事件属性，警告也就消失了。

此前你可能是直接把所有props传递给了Drawer（比如<Drawer {...props}>），导致自定义props被误传到DOM元素上，才触发了警告。

内容的提问来源于stack exchange，提问作者Sławek Coval