typescript 在React中为组件和标记的属性和样式指定类

lc8prwob 于 2022-12-19 发布在 TypeScript

关注(0)|答案(3)|浏览(158)

我是React的新手，我实际上是根据X1 E0 F1 X中的一个建议构建了一个中心有徽标的AppBar

<Box sx={{ display: "flex", alignItems: "center", flex: "1" }}>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        onClick={onDrawerOpen}
        edge="start"
        sx={{ mr: 2, ...(open && { display: "none" }) }}
      >
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" noWrap component="div">
        TITLE
      </Typography>
    </Box>

但是，有没有最好的方法可以像这样为定义之外的这些设置指定单个类或常量

<IconButton class='settings'>

而不是这一切

尝试了@ Dimitry建议的方法，并低于我的代码

export default function AppBar({ open, onDrawerOpen }:any) {
    const theme = useTheme();
    const iconButtonOptions = {
        color: "inherit",
        ariaLabel: "open drawer",
        onClick: onDrawerOpen,
        edge: "start",
        sx: {{ mr: 2, ...(open && { display: "none" }) }}
      }
    return (
        <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
        <Toolbar>
            <Box sx={{ display: "flex",flexDirection:"row", alignItems: "center", flex: "1" }}>
            <IconButton {...iconButtonOptions} >
                <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
                TITLE
            </Typography>
            </Box>
            <Box
            component="img"
            sx={{
                height: 32,
            }}
            alt="MyLogo"
            src={logo}
            />
            <Box sx={{ flex: "1" }}></Box>
        </Toolbar>
        </AppBar>
    );
  }

但它说
无法重新声明块范围内的变量“（Missing）”。ts（2451）

typescript

来源：https://stackoverflow.com/questions/74794772/specifying-class-for-properties-and-styles-for-components-and-tags-in-react

3条答案

按热度按时间

q9yhzks01#

是的，确实有办法。
首先，你可以创建一个新的对象变量来保存你所有的 prop 。

const iconBtnProps = {
   color: 'inherit',
   aria-label: 'open drawer',
   onClick: onDrawerOpen,
   edge: 'start',
   sx: { mr: 2, ...(open && { display: "none" }) }
};

// render the <IconButton /> component and spread the object
<IconButton {...iconBtnProps} />

赞(0）回复(0）举报 2022-12-19

kxkpmulp2#

我建议您检查styled-components。它确实会使组件的造型更容易。

赞(0）回复(0）举报 2022-12-19

6jjcrrmo3#

你不能通过类来定义jsx组件的props，但是如果你想让你的jsx更容易理解，或者避免重复，你可以把所有的props移到一个object中。

const iconButtonOptions = {
  color: "inherit",
  ariaLabel: "open drawer",
  onClick: onDrawerOpen,
  edge: "start",
  sx: { mr: 2, ...(open && { display: "none" }) }
}

return (
  <IconButton {...iconButtonOptions}>
    <MenuIcon />
  </IconButton>
)

赞(0）回复(0）举报 2022-12-19

我来回答

typescript 在React中为组件和标记的属性和样式指定类

3条答案

相关问题

热门标签

最新问答