尖括号在JS中是什么意思?
我看到以下示例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)
相关文章