如何解决使用React显示登录或注销按钮
我希望React的主页在用户未登录时显示“登录”和“注册”按钮,或者仅在用户登录时显示“注销”按钮。我也有标题和描述,但是我只希望在用户尚未登录时显示该标题。
我在auth.js
中使用以下功能
loggedIn() {
const token = this.getToken();
return !!token && !this.isTokenExpired(token);
}
然后在我的Homepage.js
上
import React from "react";
import "semantic-ui-css/semantic.min.css";
import { Container,Button,Grid } from "semantic-ui-react";
import { Link } from "react-router-dom";
import Auth from "../utils/auth";
export default function Homepage() {
function showNavigation() {
if (Auth.loggedIn()) {
return (
<Grid columns={2}>
<Grid.Row>
<Grid.Column>
<Link to="/" onClick={() => Auth.logout()}>
<Button.Group widths="2">
<Button >
Logout
</Button>
</Button.Group>
</Link>
</Grid.Column>
</Grid.Row>
</Grid>
);
} else {
return (
<>
<Container text textAlign="center">
<Grid columns={2}>
<Grid.Row>
<Grid.Column>
<Link to="/">
<Button.Group widths="2">
<Button>
Login
</Button>
</Button.Group>
</Link>
</Grid.Column>
<Grid.Column>
<Link to="/signup">
<Button.Group widths="2">
<Button>
Signup
</Button>
</Button.Group>
</Link>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</>
);
}
}
return (
<>
<Container
as="h1"
content="Title Here"/>
<Container
as="h2"
content="description" />
{showNavigation()}
</>
)
}
但是带有标题和说明的<Container>
和登录/注册按钮出现了两次。如何正确重构呢?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。