necesito ayuda o quiero saber si es posible o no..
Quiero mostrar un botón si solo el usuario actual tiene derechos de administrador.
En mi estado redux, hay un atributo isAdministrator y si el usuario actual tiene isAdministrator: true, entonces quiero mostrar el botón.
return ( <div> {userInfo ? ( <Link id="OpenUserManagament" to="/userManagement"> <Button style={{ marginLeft: 10, marginBottom: 6 }} size="lg"> User Management </Button> </Link> ):( <Nav.Link></Nav.Link> )} </div> )Entonces, algo después de userInfo ... esa es mi información de estado
const userLogin = useSelector((state) => state.userLogin); const { userInfo } = userLogin; {loading: true, userInfo: {…}} loading: true userInfo: auth: {username: 'admin', password: '********'} isAdministrator: true token: {} userID: "admin" userName: "admin" _id: "" [[Prototype]]: Object [[Prototype]]: ObjectLo que pides es posible. Pero a partir de su código, no puedo entender cómo se ve su objeto userLogin. Puede intentar consolarlo. Iniciar sesión, para que pueda ver lo que contiene.
una vez que resuelva allí, debe envolver su código dentro de un div como este:
//here is component body return ( <div> {userInfo.userId === "admin" ?? ( <Link id="OpenUserManagament" to="/userManagement"> <Button style={{ marginLeft: 10, marginBottom: 6 }} size="lg"> User Management </Button> </Link> )} </div> )Debería funcionar si puede ordenar la información de usuario
Un ternario simple hace el truco...
// Just a dummy example... function AdminButton({ userInfo }) { return ( <div> {userInfo.isAdministrator ? ( <React.Fragment> <p>hello admin here's some links and blah blah blah</p> <button onClick={() => alert('yay!!')}>Hello, admin!</button> </React.Fragment> ) : null} </div> ); } ReactDOM.render(<AdminButton userInfo={{ isAdministrator: true }} />, root); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <h1>Welcome! If you see a button below, you are the admin</h1> <div id="root"></div> Acabo de usar null , que no muestra nada si el usuario no es un administrador para el propósito de la demostración. Puedes mostrar otras cosas con algo como:
(/* ... */) : ( <Nav.Link></Nav.Link> )