我看到了多个示例，但没有一个适合我的问题。我想在功能组件中使用条件渲染。例如，如果用户未登录且本地存储中没有令牌，则在提交登录表单时，我要显示一条消息，表明登录无效。
if (!localStorage.getItem('token'))
{
return <Typography>Login Invalid</Typography>
console.log('Login Not possible');
}
现在，我试图将其设为一个单独的函数，并在表单的onSubmit（）中对其进行调用。但是没有任何输出。
function ShowError(){
if (!localStorage.getItem('token'))
{
return <Typography>Login Invalid</Typography>
}
else{
console.log('Login Done');
}
}
return (
<Mutation mutation={LoginMutation}>
{(LoginMutation: any) => (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}>
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { email, password },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
setState( prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(LoginMutation); ShowError()}}>
<TextField
variant="outlined"
margin="normal"
id="email"
fullWidth
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<TextField
variant="outlined"
margin="normal"
fullWidth
id="password"
name="password"
helperText={touched.password ? errors.password : ""}
error={touched.password && Boolean(errors.password)}
label="Password"
type="password"
value={password}
onChange={change.bind(null, "password")}
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<br />
<Button className='button-center'
type="submit"
disabled={!isValid || !email || !password}
onClick={handleOpen}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px'
}}
>
Submit</Button>
<br></br>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
{/* <Snackbar open={open} autoHideDuration={6000} >
<Alert severity="success">
This is a success message!
</Alert>
</Snackbar> */}
</form>
)
}}
</Formik>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
)
}
</Mutation>
);
}
export default LoginPage;
f我这样做{localStorage.getItem('token') && <Typography>Invalid Login</Typography>}
即使在提交表单之前也将呈现它，但我只希望在未提交表单时显示它。 我该如何解决？
答案 0 :(得分：0)
为什么不简单地在最终申报表之前插入条件。我通常这样做是为了显示一些错误。
比方说，您的组件称为LoginPage。然后-
function LoginPage() {
...//do something
...//do something
if (!localStorage.getItem('token'))
{
return <Typography>Login Invalid</Typography>
}
return(
<Mutation mutation={LoginMutation}>
{(LoginMutation: any) => (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}>
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { email, password },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
setState( prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(LoginMutation)}}>
<TextField
variant="outlined"
margin="normal"
id="email"
fullWidth
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<TextField
variant="outlined"
margin="normal"
fullWidth
id="password"
name="password"
helperText={touched.password ? errors.password : ""}
error={touched.password && Boolean(errors.password)}
label="Password"
type="password"
value={password}
onChange={change.bind(null, "password")}
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<br />
<Button className='button-center'
type="submit"
disabled={!isValid || !email || !password}
onClick={handleOpen}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px'
}}
>
Submit</Button>
<br></br>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
**IF ELSE STATEMENT HERE**
</Grid>
{/* <Snackbar open={open} autoHideDuration={6000} >
<Alert severity="success">
This is a success message!
</Alert>
</Snackbar> */}
</form>
)
}}
</Formik>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
)
}
</Mutation>
)
}
export default LoginPage;
答案 1 :(得分：0)
您可以使用<=语句代替>=
ternary答案 2 :(得分：0)
function renderMe(){
if (!localStorage.getItem('token'))
{
return <ErrorComponent />
}else{
return <Dashboard />
}
}
return renderMe();
这对我来说很好。我希望这可以解决您的问题。