#reactjs #react-router #react-dom #react-fullstack
#reactjs #реагировать-маршрутизатор #react-dom #react-fullstack
Вопрос:
Вот мой файл с двумя компонентами, которые должны отображаться условно. Проблема в том, что прямо перед экспортом я не могу использовать свои переменные из isLoggedIn (u, useradmin, p, passadmin).
import React, { Fragment, useState } from "react";
import "./SignIn.css";
import { Link } from "react-router-dom";
const isLoggedIn = (user, pass) => {
let u = user.toString();
let p = pass.toString();
let useradmin = "bilal";
let passadmin = "123";
console.log(u)
console.log(p)
if (u === useradmin amp;amp; p === passadmin) {
console.log("success")
return (
<Fragment>
<button type="button" className="btn btn-warning" data-toggle="modal">Head to Admin</button>
<div className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title text-dark">Successfully Signed In!</h4>
<button type="button" className="close" data-dismiss="modal" ></button>
</div>
<div className="modal-body">
<input type="text" className="form-control" />
</div>
<div className="modal-footer">
<Link to="/adminqueue">
<button type="button" className="btn btn-danger" data-dismiss="modal">Enter Admin Queue</button>
</Link>
</div>
</div>
</div>
</div>
</Fragment>
)
}
}
const SignIn = () => {
const [user, setUser] = useState('');
const [pass, setPass] = useState('');
return (
<Fragment>
<div className="login-box">
<h1>Admin Log In</h1>
<form>
<div className="textbox">
<i className="fas fa-user" />
<input onChange={event => setUser(event.target.value)} type="text" placeholder="Username" />
</div>
<div className="textbox">
<i className="fas fa-lock" />
<input onChange={event => setPass(event.target.value)} type="password" placeholder="Password" />
</div>
<button className="button" type="button" value="Sign in" onClick={() => isLoggedIn(user, pass)} >SignIn</button>
</form>
</div>
</Fragment>
)
}
const exp = u === useradmin amp;amp; p === passadmin ? isLoggedIn : SignIn;
export default exp;
Это просто текст, потому что переполнение стека говорит, что у меня слишком много кода (ИГНОРИРОВАТЬ).
Комментарии:
1. они находятся за пределами функции react, нет?
2. @Sinan Yaman они находятся снаружи, есть ли еще возможность доступа к переменным изнутри, возможно, с помощью реквизитов?
3. В чем именно ошибка? Хотя, сразу же, я не думаю, что ваше использование
isLoggedIn
корректно вSignIn
компоненте. Вы используете его там как обработчик событий, но внутри функции он является функциональным компонентом. Кроме того, условный экспорт двух компонентов также кажется странным. Нам определенно нужно больше информации о том, что вы хотите, чтобы он делал, и как он себя ведет.4. @theJuls В итоге я понял, что создал логическое значение и условно отображаемое внутри одного метода, вы должны попробовать, если столкнетесь с подобным случаем!