如何解决类型 'string' 不可分配给类型 '"menu" | "selectedMenu" |不明确的'
我在 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
解决方法
因为 variant
只接收类型是 "menu" | "selectedMenu" | undefined
。但是您传递的值是没有类型的“菜单”。所以它会自动有类型是string
。
您需要为 variant
定义类型。像这样:
const MenuProps = {
variant: 'menu' as 'menu',...
};
,
您可以使用以下命令从 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",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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。