hola, soy nuevo en reactjs y quiero aprender a ocultar y mostrar un div al hacer clic en el botón. Esta es la parte de la vista que quiero ocultar.
<div className="comment_usr_details"> <div> <img className="comment_usr_pic" src={profilePicture} alt=""/> </div> <div className="b"> <p className="c">John Smith</p> <p className="d">1 minutes ago</p> </div> <img className="e" src={downarrow} alt=""/> </div>El patrón más común para esto es renderizar selectivamente el elemento basado en el estado.
class Foo extends React.Component { state = { showing: true }; render() { const { showing } = this.state; return ( <div> <button onClick={() => this.setState({ showing: !showing })}>toggle</button> { showing ? <div>This is visible</div> : null } </div> ) } }También puede usar un estilo basado en el estado. Esto es menos común, pero puede ser útil cuando tiene componentes complejos dentro de ese div: un ejemplo reciente, tenía un gráfico complejo que no era React D3 dentro de un componente que se podía alternar, inicialmente, usé el primer método anterior, pero causó bastante un poco de retraso al encender/apagar el div porque D3 estaba subiendo de nuevo.
Sin embargo, generalmente use el primer enfoque, a menos que tenga una razón para usar la alternativa.
class Foo extends React.Component { state = { showing: true }; render() { const { showing } = this.state; return ( <div> <button onClick={() => this.setState({ showing: !showing })}>toggle</button> <div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div> </div> ) } } Uso el operador ternario ?: en lugar de && . Creo firmemente que el uso de && se basa en un efecto secundario de ese operador para lograr un resultado determinado. Funciona, no me malinterpreten, pero el operador ternario, en mi opinión, es mucho más expresivo y fue diseñado para ser un condicional.
Esta última parte es solo mi opinión, por lo que no cuestiono el uso de && .
En React, simplemente no renderizas esa parte del HTML. Así que hazlo parte de un condicional:
{ this.props.display && <div className="comment_usr_details"> ... </div> }Entonces, si this.props.display es verdadero, se muestra el div y si es falso, no lo hace.
class HideAndShowDivOnClick extends React.Component { state = { showDiv: true } render() { const { showDiv } = this.state return ( <div> <button onClick={() => this.setState({ showDiv: !showDiv })}> { showDiv ? 'hide' : 'show' } </button> { showDiv && ( <div id="the div you want to show and hide">Peek a boo</div> )} </div> ) } }