类型 'string' 不可分配给类型 '"menu" | "selectedMenu" |不明确的'

Question

我在 typescript、material-ui、React 中进行多项选择。我需要设置 MenuProps.variant = 'menu'，但我遇到了错误，

输入'{变体：字符串； PaperProps: { style: { maxHeight: number;宽度：数量； }; }; }' 不可分配给类型 'Partial'。 属性“变体”的类型不兼容。 类型 'string' 不可分配给类型 '"menu" | "selectedMenu" |未定义'。

对于下面的代码。如何解决此错误？

import React from 'react';
import Input from '@material-ui/core/Input';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  variant: 'menu',
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder',
];


export default function MultipleSelect() {
  const classes = useStyles();
  const theme = useTheme();
  const [personName, setPersonName] = React.useState<string[]>([]);

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setPersonName(event.target.value as string[]);
  };

  return (
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input />}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>
              {name}
            </MenuItem>
          ))}
        </Select>
      )
}

参考
https://material-ui.com/api/menu/
https://material-ui.com/components/selects/#multiple-select

Answer 1

因为 variant 只接收类型是 "menu" | "selectedMenu" | undefined。但是您传递的值是没有类型的“菜单”。所以它会自动有类型是string。 您需要为 variant 定义类型。像这样：

const MenuProps = {
  variant: 'menu' as 'menu',
  ...
};

Answer 2

您可以使用以下命令从 Material-UI 导入 MenuProps 类型：

import { MenuProps as MenuPropsType } from "@material-ui/core/Menu";

然后你可以像下面这样使用它：

const MenuProps: Partial<MenuPropsType> = {
  variant: "menu",
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  }
};

您使用 Partial<MenuPropsType>（因为它也在 Select type definition 中）因为 Select 会自动添加所需的 open 道具（如果您删除 Partial，它会抱怨未指定 open 道具）。

这是一个基于您的代码的工作示例：

import React from "react";
import { MenuProps as MenuPropsType } from "@material-ui/core/Menu";
import Input from "@material-ui/core/Input";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps: Partial<MenuPropsType> = {
  variant: "menu",
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  }
};

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

export default function MultipleSelect() {
  const [personName, setPersonName] = React.useState<string[]>([]);

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setPersonName(event.target.value as string[]);
  };

  return (
    <Select
      multiple
      value={personName}
      onChange={handleChange}
      input={<Input />}
      MenuProps={MenuProps}
    >
      {names.map((name) => (
        <MenuItem key={name} value={name}>
          {name}
        </MenuItem>
      ))}
    </Select>
  );
}