Question

我有一个看起来像这样的组件：

obj = {} || obj;
obj.str = '[TITLE] [STORENAME] [DYNAMIC]';

const replace = 'prefix';
const value = 'MY VALUE';

obj.str.split(" ").forEach(function(val){
  let search = val.replace("[", "").replace("]", "");
  let regex = new RegExp(`(\\[${search}(?:\\|[^\\][]*)?)]`, 'gi');
  obj.str = obj.str.replace(regex, `$1|${replace}=${value}]`);
})


console.log(obj.str);

并被这样称呼：

type IconButtonProps = { text: string ; onClick: () => void, icon: any};

export const IconButton: FunctionComponent<IconButtonProps> = ({
  text,
  onClick,
  icon,
}) => {
  const classes = useStyles();
  return (
    <Button className={classes.button} 
    onClick={onClick}
   >
     {' '}
    {icon}
     {text}
   </Button>
  );
};

在道具中，我使用import SearchIcon from '@material-ui/icons/Search'; <IconButton text={'Search'} icon={<SearchIcon />} onClick={()=>SearchUsers()}></IconButton>作为图标的类型。什么是正确使用的类型？我想避免使用任何类型。

Answer 1

如果您使用 Material Icon 作为 Prop，则可以将类型声明为

icon:  OverridableComponent<SvgIconTypeMap<{}, "svg">>;

它是材质 UI 提供的材质图标类型的默认值。

所以你可以将你的类型声明为

type IconButtonProps = { text: string ; onClick: () => void, icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;};

Answer 2

使用这种方式

export const IconButton: FunctionComponent = ({
  text,
  onClick,
  icon
}) => {
  const classes = useStyles();
  return (
    <Button className={classes.button} 
    onClick={onClick}
   >
     {' '}
    {icon}
     {text}
   </Button>
  );
};

Answer 3

也许import { SvgIconComponent } from "@material-ui/icons";

材质UI图标的类型

3 个答案: