无法读取未定义的属性（读取“4”）

Question

我知道有很多与此类似的问题，但我已经尝试了其中的每一个，但我仍然无法使其发挥作用。

好吧，我正在使用 typescript 和 styled-components 构建自己的 ui 库。 老实说，我是 TS 的新手，所以我有可能遗漏了一些明显的东西，所以任何建议都会受到赞赏。

现在开始重要的事情，这里有一些代码：

  /// THIS IS IN THE PROJECT I'M TRYING TO USE MY LIBRARY
  <Button 
        size={4}
      >
        My cool button
  </Button>

如您所见，我将size属性传递给我自己的库的 Button 组件。 图书馆在这里收到了这个道具：

const Button = (props: IButtonProps) => {
  return (
    <StyledButton {...props}>
     {props.leftIcon && <ButtonIcon marginRight={props.iconSpacing}>{props.leftIcon}</ButtonIcon>}
     {props.children}
     {props.rightIcon && <ButtonIcon marginLeft={props.iconSpacing}>{props.rightIcon}</ButtonIcon>}
    </StyledButton>
  )
}

现在你可以看到我有<StyledButton>使用 styled-components 我正在传播道具：

const StyledButton = styled.button<IButtonProps>`
   // Other properties

  padding: ${props => props.theme.paddings[props.size as SizeTypes ?? 4]};

  // More properties

问题就在这里。 当我使用库从项目中传递size={4}时，标题中出现错误。

当然，我已经用我的对象和它的属性定义了一个DeafultTheme ：

import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme {

    // Some objects
   
    paddings: {
      1: string,
      2: string,
      3: string,
      4: string,
      5: string,
      6: string,
      7: string,
      8: string
    };

    // More objects
  }
}

以及一个使用它的theme ：

import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  paddings: {
    1: '2px',
    2: '4px',
    3: '6px',
    4: '8px',
    5: '10px',
    6: '12px',
    7: '16px',
    8: '24px',
  }
};

export { theme };

最后，我的IButtonProps接口：

interface IButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  onClick?: (evt: React.FormEvent<HTMLElement>) => void;
  bg?: string;
  size: number;
  spacing: number;
  fontSize?: string;
  fontWeight?: string;
  borderRadius: number;
  color?: string;
  iconSpacing?: number;
  leftIcon?: React.ReactElement;
  rightIcon?: React.ReactElement;
  children?: React.ReactNode;
}

export { IButtonProps };

如果还有其他内容可以为您提供更多输入以帮助我，我当然会编辑该帖子。

提前致谢！

Answer 1

我刚刚写了一个简单的例子，效果很好。 也许你能找到你和我的不同之处。

https://codesandbox.io/s/flamboyant-leaf-y4oyh?file=/src/App.js

import styled, { ThemeProvider } from "styled-components";

const paddingMap = {
  1: "10px",
  2: "20px",
  3: "30px",
  4: "40px"
};

const StyledButton = styled.button`
  font-size: ${(props) => props.theme.padding[props.size ?? 4]};
`;

const Button = (props) => {
  return <StyledButton {...props} />;
};

export default function App() {
  return (
    <ThemeProvider theme={{ padding: paddingMap }}>
      <div className="App">
        <Button>my default button</Button>
        <Button size={4}>my size 4 button</Button>
        <Button size={3}>my size 3 button</Button>
        <Button size={2}>my size 2 button</Button>
        <Button size={1}>my size 1 button</Button>
      </div>
    </ThemeProvider>
  );
}

Answer 2

正如我在评论中所说，我犯了一个明显的错误：我忘记使用theme object 嵌入我的组件。

因此，我使用ThemeProvider提供者制作了一个新的ThemeWrapper.tsx组件，该提供者将theme传递给每个children道具（库的组件）：

import * as React from 'react';
import { ThemeProvider } from 'styled-components'
import { theme } from './theme';

const ThemeWrapper: React.FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
};

export { ThemeWrapper };

在我的Button.tsx组件中：

const Button = (props: IButtonProps) => {
  return (
    <>
      <ThemeWrapper> --> Pay attention at this.
        <StyledButton {...props}>
          {props.leftIcon && <ButtonIcon mr={props.leftIconSpacing}>{props.leftIcon}</ButtonIcon>}
          {props.children}
          {props.rightIcon && <ButtonIcon ml={props.rightIconSpacing}>{props.rightIcon}</ButtonIcon>}
        </StyledButton>
      </ThemeWrapper>
    </>
  )
}

谢谢！