none - Mostrar/Ocultar componentes en ReactJS

react hidden attribute

Question

Hemos estado experimentando algunos problemas al usar reaccionar ahora, pero se reduce a una parte de cómo hemos estado usando reaccionar.

¿Cómo deberíamos haber estado mostrando u ocultando componentes secundarios?

Así es como lo hemos codificado (esto son solo fragmentos de nuestros componentes) ...

_click: function() {
if ($(''#add-here'').is('':empty''))
React.render(<Child />, $(''#add-here'')[0]);
else
React.unmountComponentAtNode($(''#add-here'')[0]);
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
<div id="add-here"></div>
</div>
)
}

y últimamente he estado leyendo ejemplos como debería haber sido en algún lugar en esta línea:

getInitialState: function () {
return { showChild: false };
},
_click: function() {
this.setState({showChild: !this.state.showChild});
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
{this.state.showChild ? <Child /> : null}
</div>
)
}

¿Debería haber estado usando ese React.render ()? Parece detener varias cosas como shouldComponentUpdate para conectar en cascada al elemento secundario y cosas como e.stopPropagation ...

Answer 1

He proporcionado un ejemplo de trabajo que sigue su segundo enfoque. La actualización del estado del componente es la forma preferida de mostrar / ocultar los elementos secundarios.

Dado que tienes este contenedor:

<div id="container">
</div>

puede usar Javascript moderno (ES6, primer ejemplo) o JavaScript clásico (ES5, segundo ejemplo) para implementar la lógica de componentes:

Mostrar / ocultar componentes usando ES6

Prueba esta demo en vivo en JSFiddle

class Child extends React.Component {
render() {
return (<div>I''m the child</div>);
}
}
class ShowHide extends React.Component {
constructor() {
super();
this.state = {
childVisible: false
}
}
render() {
return (
<div>
<div onClick={() => this.onClick()}>
Parent - click me to show/hide my child
</div>
{
this.state.childVisible
? <Child />
: null
}
</div>
)
}
onClick() {
this.setState(prevState => ({ childVisible: !prevState.childVisible }));
}
};
React.render(<ShowHide />, document.getElementById(''container''));

Mostrar / ocultar componentes con ES5

Prueba esta demo en vivo en JSFiddle

var Child = React.createClass({
render: function() {
return (<div>I''m the child</div>);
}
});
var ShowHide = React.createClass({
getInitialState: function () {
return { childVisible: false };
},
render: function() {
return (
<div>
<div onClick={this.onClick}>
Parent - click me to show/hide my child
</div>
{
this.state.childVisible
? <Child />
: null
}
</div>
)
},
onClick: function() {
this.setState({childVisible: !this.state.childVisible});
}
});
React.render(<ShowHide />, document.body);

Answer 2

 /* eslint-disable jsx-a11y/img-has-alt,class-methods-use-this */
import React, { Component } from ''react'';
import PropTypes from ''prop-types'';
import todoStyle from ''src/style/todo-style.scss'';
import { Router, Route, hashHistory as history } from ''react-router'';
import Myaccount from ''src/components/myaccount.jsx'';
export default class Headermenu extends Component {
constructor(){
super();
// Initial state
this.state = { open: false };
}
toggle() {
this.setState({
open: !this.state.open
});
}
componentdidMount() {
this.menuclickevent = this.menuclickevent.bind(this);
this.collapse = this.collapse.bind(this);
this.myaccount = this.myaccount.bind(this);
this.logout = this.logout.bind(this);
}
render() {
return (
<div>
<div style={{ textAlign: ''center'', marginTop: ''10px'' }} id="menudiv" onBlur={this.collapse}>
<button onClick={this.toggle.bind(this)} > Menu </button>
<div id="demo" className={"collapse" + (this.state.open ? '' in'' : '''')}>
<label className="menu_items" onClick={this.myaccount}>MyAccount</label>
<div onClick={this.logout}>
Logout
</div>
</div>
</div>
</div>
);
}
menuclickevent() {
const listmenu = document.getElementById(''listmenu'');
listmenu.style.display = ''block'';
}
logout() {
console.log(''Logout'');
}
myaccount() {
history.push(''/myaccount'');
window.location.reload();
}
}