问题描述

我看到以下示例JSX代码：

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(['width', 'margin'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

我不明白在做什么。

所以我用巴别塔来翻译和获取：

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: prop => prop !== 'open'
}) < AppBarProps > (({
  theme,
  open
}) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(['width', 'margin'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  })
}));

这是.< AppBarProps >.卑鄙？(睡觉我听得懂)

很抱歉，如果这似乎是有史以来最愚蠢的问题，但无法想象这里发生了什么。

推荐答案

这是在TypeScript中声明generic类型参数的一种方式。styled返回创建附加了样式的组件的即席。我将细分代码以使其更容易理解：

const hoc = styled(MuiComponent)

// StyledMuiComponent now can accept the props with type MuiComponentProps
const StyledMuiComponent = hoc<MuiComponentProps>(styles)

这篇关于尖括号在JS中是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！