Блог

Я вижу следующий пример кода 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 amp;amp; {
    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 amp;amp; {
    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. styled возвращает запрос, который создает компонент с прикрепленными стилями. Я разберу код на части, чтобы его было легче усваивать:

 const hoc = styled(MuiComponent)

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