Saltar al contenido

Cómo mostrar u ocultar los elementos y componentes en ReactNov, 10thIn este tutorial, vamos a aprender acerca de las diferentes maneras de mostrar …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de las diferentes maneras de mostrar u ocultar los elementos y componentes en reaccionar.

Considere tenemos este componente con dos botones de mostrar u ocultar.

import React,{Component} from 'react'

class App extends Component{

render(){
return(

Hello React

)
}
}

export default App;

Ahora necesitamos para ocultar o mostrar el elemento h1 por haga clic en los dos botones.

Vamos a añadir una función de controlador de eventos estatales y de nuestro componente.

import React,{Component} from 'react'

class App extends Component{

state = {
isActive:false }

handleShow = ()=>{
this.setState({
isActive: true })
}

handleHide = () =>{
this.setState({
isActive: false })
}

render(){
return(

{this.state.isActive ?

Hello React

: null }

)
}
}

export default App;

En el código anterior, hemos utilizado el operador ternario {condición? true: true} para mostrar u ocultar nuestro elemento h1, significa que estamos mostrando elemento H1 si la propiedad isActive es cierto lo contrario estamos mostrando nula (nada).

Usando lógico && operador

También podemos utilizar lógico && operador para mostrar u ocultar los elementos. propiedad

{this.state.isActive &&

Hello React

}

Si isActive es cierto elemento h1 se representa en la pantalla. si la propiedad es falsa h1 no se representa en la pantalla.

de usar si / else

En el siguiente ejemplo, estamos utilizando JavaScript sentencia if / else para mostrar u ocultar los elementos.

import React, { Component } from "react";

class App extends Component {
state = {
isActive: false
};

handleShow = () => {
this.setState({
isActive: true
});
};

handleHide = () => {
this.setState({
isActive: false
});
};

render() {
if (this.state.isActive) { return (

Hello react

); } else { return (

); } }
}

export default App;

aquí estamos haciendo que los elementos dentro de si el bloque, si la propiedad isActive es cierto lo contrario, están prestando los elementos insideelse bloque.

Mostrar u ocultar los componentes

Del mismo modo, se pueden utilizar los mismos operadores condicionales para mostrar u ocultar los componentes.

Veamos un ejemplo.

import React, { Component } from "react";

class App extends Component {
state = {
isActive: false
};

handleShow = () => {
this.setState({isActive: true});
};

handleHide = () => {
this.setState({isActive: false});
};

render() {
return (

{this.state.isActive &&

Hello react

}
{this.state.isActive ?( ) : ( )}

)
}
}

export default App;

En este ejemplo, se prestan componente si la propiedad es isActive true.If la propiedad es falso que prestan componente.