JS中的尖括号是什么意思？答案

【问题标题】：What does angle brackets mean in JS?JS中的尖括号是什么意思？
【发布时间】：2021-11-26 03:11:31
【问题描述】：

我看到以下示例 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,
    }),
  }),
}));

我不明白在做什么。

所以我用babel翻译得到：

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 >...是什么意思？（其余的我理解就好了）

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

【问题讨论】：

您实际拥有的是 TSX，而不是 JSX。这是打字稿。

标签： javascript material-ui jsx

【解决方案1】：

这是在 typescript 中声明generic 类型参数的一种方式。 styled 返回一个 HOC，它创建一个附加了样式的组件。我将分解代码以使其更易于消化：

const hoc = styled(MuiComponent)

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

【讨论】：