将数组值与样式组件一起使用时，对象可能是 'undefined'

Question

我正在构建一个骨架组件，它接受一个名为 circleSizes 的道具，它是一个数字数组，用于设置骨架的宽度和高度。

这是组件：

export const SkeletonHandler: React.FC<SkeletonHandlerProps> = ({
  count = 1,
  circle = false,
  circleSizes = [50, 50],
}) => {
  return (
    <SkeletonWrapper count={count} circleSizes={circleSizes}>
      <Skeleton count={count} circle={circle} />
    </SkeletonWrapper>
  );
};

我的types.ts:

export type SkeletonHandlerProps = {
  count?: number;
  circle?: boolean;
  circleSizes?: Array<number>;
};

我知道如果删除 ?，错误就会消失，但我不希望这个属性成为必需项。

还有我的样式组件文件：

export const SkeletonWrapper = styled.div<SkeletonHandlerProps>`
  width: ${(circle) => (circle ? 'fit-content' : '100%')};
  ${({ circle, circleSizes }) =>
    circle &&
    css`
      .react-loading-skeleton {
        width: ${circleSizes[0]};
        height: ${circleSizes[1]};
      }
    `}
`

图片错误：

我尝试过的：

将 circleSizes 数组的默认值放在 props 中，例如：circleSizes = [50, 50]
为 types.ts 设置默认值，例如：circleSizes?: Array<number> | [50, 50];
将 circleSizes 转换为样式组件文件中的数字，例如：width: ${Number(circleSizes[0])};

我做错了什么？

Answer 1

它抱怨是因为您在可能是 undefined 的变量上使用括号操作数，因此请尝试在 circleSizes && circleSized[1]

之前添加有效性检查

将数组值与样式组件一起使用时，对象可能是 'undefined'

Object is possibly 'undefined' when using array values with styled-components

typescript

reactjs

styled-components