想法使这段代码少重复?

Question

下面是相关组件的概要

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个链接，但以后会有相当多的)

Answer 1

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

分离组件我试图解释导致解决方案的步骤。您可能想跳过一些步骤并得到相同的结果(但实际上我有时只是这样开始编码):

1. 首先，我将制作两个独立的组件用于大的和小的。
2. 创建GenericLink组件和GenericButton组件。
3. 将GenericLink和GenericButton中需要的所有代码添加到其中一个大小，例如large，并使其工作
4. "Debug"另一个大小，例如小，通过添加必要的属性和代码，使其工作。
实现必要的属性和条件(如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'} />。这样就可以使用相同的数据来生成大列表和小列表。