时间戳

首页 > 解决方案 > 减少此代码重复性的想法？

javascript - 减少此代码重复性的想法？

问题描述

这是相关组件的概要

export default () => {
  const { currentUser, logout } = useAuth();
  const [sideBarOpen, setSideBarOpen] = useState(false);
  const theme = useTheme();
  const classes = useStyles();
  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
  const history = useHistory();

  const toggleSideBar = () => {
    setSideBarOpen(!sideBarOpen);
  };

  const handleLogout = () => {
    setSideBarOpen(!sideBarOpen);
    logout();
    history.push("/login");
  };

  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Typography variant="h6" className={classes.title}>
          Chatter
        </Typography>
        {isSmall ? (
          <>
            <IconButton color="inherit" onClick={toggleSideBar}>
              <MenuIcon />
            </IconButton>
            <Drawer
              anchor="right"
              open={sideBarOpen}
              onClose={toggleSideBar}
              className={classes.sideBar}
            >
              <List className={classes.drawerList}>
                <ListItemLink
                  primary="login"
                  to="/login"
                  icon={<LockOpenIcon />}
                  onClick={toggleSideBar}
                />
                <Divider />
                <ListItemLink
                  primary="signup"
                  to="/signup"
                  icon={<ArrowUpwardIcon />}
                  onClick={toggleSideBar}
                />
                {currentUser && (
                  <Button
                    onClick={handleLogout}
                    color="primary"
                    variant="contained"
                  >
                    Logout
                  </Button>
                )}
              </List>
            </Drawer>
          </>
        ) : (
          <>
            <Link to="/signup">
              <Button variant="contained" color="primary">
                Sign up
              </Button>
            </Link>
            <Button variant="contained" color="primary" onClick={handleLogout}>
              {currentUser ? "Logout" : "Login"}
            </Button>
          </>
        )}
      </Toolbar>
    </AppBar>
  );
};

我想知道如何才能不重复移动和桌面的链接两次，因为它们有 2 个独立的导航，移动有侧边栏，更大的有合法的导航栏。也许有办法用材料ui做到这一点？也许有一个很好的解决方案，只需做出反应？任何帮助将不胜感激谢谢（现在只有 2 个链接，但稍后会有更多）

标签： javascriptreactjsmaterial-uirefactoring

解决方案

会有不同的可能方法。您需要定义哪些探针、样式或代码必须不同，以及哪些部分可以重复使用。例如，我不确定是否ListItemLink可以Link在您的用例中结合使用，或者按钮是否应该看起来相同或具有不同的大小，...

分离组件

我试图解释导致解决方案的步骤。您可能想跳过一些步骤并得到相同的结果（但实际上我有时只是以这种方式开始编码）：

  1. 首先，我会为大小分别制作两个单独的组件。
  2. 创建例如一个GenericLink组件和一个GenericButton组件。
  3. 将所有代码添加到其中一种尺寸（例如大）所必需的，GenericLink并GenericButton使其工作。
  4. 通过添加必要的属性和代码来“调试”其他大小，例如小，以使其工作。
  5. 实现必要的属性和条件（例如size={'small'}和icon={ size === 'small' ? null : <ArrowUpwardIcon />}）

在某处，您现在可能已经为您的特定用例找到了一个好的解决方案，或者您发现它根本不起作用并且您确实需要单独的组件。

传递数据而不是 JSX

<Link ...>您可以将列表存储为数组，而不是将每个组件写入 JSX：

const links = [
  { primary: "login", to: "login", icon: <LockOpenIcon />, onClick: toggleSideBar },
  ...
]

您可以将此数据传递给单独的组件，例如<GenericList list={ list } size={'small'} />. 这样您就可以使用相同的数据来生成大列表和小列表。

推荐阅读