使这段代码不那么重复的想法？ 分离组件传递数据而不是 JSX

如何解决使这段代码不那么重复的想法？ 分离组件传递数据而不是 JSX

这里是相关组件的概要

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 个单独的导航，移动设备有侧边栏，更大的有合法的导航栏。也许有办法用材料用户界面做到这一点？也许有一个很好的解决方案，只需做出反应？任何帮助将不胜感激，谢谢（现在只有 2 个链接，但稍后会有更多）

解决方法

会有不同的可能方法。您需要定义哪些探测器、样式或代码必须不同，哪些部分可以重用。例如。我不确定 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'} />。这样你就可以使用相同的数据来生成大列表和小列表。