Para mostrar el botón de forma condicional usando la instrucción if y else, podemos usar state en react.js. Declare el estado en el método constructor porque se carga primero cuando se carga el componente. Para alternar entre usuario y administrador, necesitamos usar un controlador de eventos. Usando este controlador de eventos, podemos alternar el estado del usuario. A continuación se muestra la implementación del código para mostrarlo.
Ejemplo:
-
demostración.js:
JavaScript
import React, {Component} from
'react'
class DemoUser extends Component {
constructor(){
super
()
this
.state = {
isAdmin:
true
}
this
.toggleState =
this
.toggleState.bind(
this
);
}
toggleState() {
this
.setState ({
isAdmin:!
this
.state.isAdmin }
)
}
render(){
if
(
this
.state.isAdmin){
return
(
<div>
<h3> Welcome Admin </h3><span >
Is the user admin :
{
this
.state.isAdmin.toString()}</span>
<br/>
<button onClick={
this
.toggleState}>
Toggle between user and admin
</button>
</div>
)
}
else
{
return
(
<div>
<h3> Welcome User </h3><span >
Is the user admin :
{
this
.state.isAdmin.toString()}</span>
<br/>
<button onClick={
this
.toggleState}>
Toggle between user and admin
</button>
</div>
)
}
}
}
export
default
DemoUser
-
índice.js:
JavaScript
import React from
'react'
;
import ReactDOM from
'react-dom'
;
import
'./index.css'
;
import App from
'./App'
;
import * as serviceWorker from
'./serviceWorker'
;
import DemoUser from
'./demo'
ReactDOM.render(
<React.StrictMode>
<DemoUser />
</React.StrictMode>,
document.getElementById(
'root'
)
);
serviceWorker.unregister();
Producción:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA