时间戳

首页 > 解决方案 > 反应选择样式和打字稿

reactjs - 反应选择样式和打字稿

问题描述

根据react-select 文档，我可以像这样访问传递给 Select 主体的我自己的参数：

const customStyles = {
  menu: (provided, state) => ({
    ...provided,
    width: state.selectProps.width,
    borderBottom: '1px dotted pink',
    color: state.selectProps.menuColor,
    padding: 20,
  }),

  control: (_, { selectProps: { width }}) => ({
    width: width
  }),

  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

但是，如果我在打字稿中有这样的东西

const customStyles: SelectProps["styles"] = {
  valueContainer: (provided, { selectProps: { size } }) => {
    const px = {
      sm: "0.75rem",
      md: "1rem",
      lg: "1rem"
    };

    return {
      ...provided,
      padding: `0.125rem ${px[size]}` 
    };
  },

};

该${px[size]}部分引发错误

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ sm: string; md: string; lg: string; }'.

标签： reactjstypescriptreact-select

解决方案

它表示传入size的是一个any类型，打字稿不知道它是否是 的键之一sm md lg。

方式01：用于cast通知打字稿，大小是其中之一sm md lg

const px = {
  sm: "0.75rem",
  md: "1rem",
  lg: "1rem"
};

px[size as 'sm' | 'md' | 'lg']

方式02：有一个类型px并使用它的键进行铸造

type PxType = { [k in 'sm' | 'md' | 'lg']: string }

const px: PxType = {
  sm: "0.75rem",
  md: "1rem",
  lg: "1rem"
};

px[size as keyof PxType]

推荐阅读