Según lo que veo, tienes implementado un sidebar y mediante un botón hamburguesa alternas su visiblidad.
pero como soy medio nuevo en esto no se como implementar el JavaScript en el render de mi componente
Eso deja de lado otras opciones como Redux. Sin embargo, hay veces en que soluciones simples están delante de nosotros y siempre optamos por lo complejo.
para hacer lo que quieres solo te basta conocer un par de cosas:
React se creó para dividir la UI en pequeños módulos reutilizables. En lugar de tener toda la UI en un solo archivo HTML, divides ese archivo en pequeños trozos y los conviertes en componentes. El mismo enfoque se usa en otros frameworks como Vue.js 2, Ember.js y Angular 2.
Vamos a suponer el siguiente escenario; nuestra UI se componen de 4 elementos:
- Sidebar (menu lateral)
- Top (barra superior donde está el dropdown del usuario)
- Main (donde va el contenido principal)
- Content (que alberga a Top y Main)
Y todo ésto conforma el 5to componente, el Dashboard
.
Dashboard
class Dashboard extends React.Component {
constructor (props) {
super(props);
this.state = {
sidebarVisible: true
}
}
getChildContext () {
const _this = this;
return {
sidebarVisible: _this.state.sidebarVisible,
toggleSidebar: function () {
_this.setState({
sidebarVisible: !_this.state.sidebarVisible
});
}
};
}
render () {
return (
<section className="container">
<Sidebar />
<Content />
</section>
);
}
}
Dashboard.childContextTypes = {
sidebarVisible: React.PropTypes.boolean,
toggleSidebar: React.PropTypes.func
};
La parte importante aquí es Dashboard.childContextTypes
y getChildContext
. Cuando se usa context
, puedes compartir propieades en forma descendente; es decir, un padre comparte propiedades con sus hijos, que pueden ir desde texto hasta funciones.
Por medio de childContextTypes
especificas las propiedades que van a ser compartidas y, además, el tipo de cada una de ellas. Puedes ver la lista de tipos aquí. Es obligatorio proveer un valor por defecto para ellas, y esto se hace por medio de getChildContext
.
La propiedad sidebarVisible
indica el estado del sidebar y toggleSidebar
es una función que cambia el estado y por ende, hace que se actualice el componente y también la propiedad sidebarVisible
, alternando entre true
y false
.
Sidebar
class Sidebar extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
componentDidMount () {
this.setState({
visible: this.context.sidebarVisible
});
}
componentWillUpdate(props, state, ctx) {
if (this.state.visible !== ctx.sidebarVisible) {
this.setState({
visible: ctx.sidebarVisible
});
}
}
render () {
let classes = 'sidebar ';
classes += this.state.visible ? 'visible' : '';
return (
<aside className={ classes }></aside>
);
}
}
Sidebar.contextTypes = {
sidebarVisible: React.PropTypes.boolean
};
Los hijos deben también definir los tipos que desean tener disponibles en el context
y ésto se hace por medio de contextTypes
. Al hacer ésto tendrás disponible sidebarVisible
en el objeto context
(this.context
).
Cuando se actualize el estado sidebarVisible
de Dashboard
lo que pasará es que se actualizará también el valor del context
y se verá reflejado en todos los hijos. En éste componente capturamos el nuevo context
gracias al método del ciclo de vida componentWillUpdate
y actualizamos el estado con el nuevo valor del context
. Lo que pasará a continuación es que al actualizarse el estado de Sidebar
se volverá a renderizar el componente y la línea classes += this.state.visible ? 'visible' : '';
devolverá visible
o vacío, lo que hará que el menú se haga o no visible por medio de la clase CSS visible
.
Top
class Top extends React.Component {
render () {
return (
<header className="top">
<div className="hamburger" onClick={this.toggleMenu.bind(this)}>
<i className="material-icons">reorder</i>
</div>
</header>
);
}
toggleMenu () {
this.context.toggleSidebar();
}
}
Top.contextTypes = {
sidebarVisible: React.PropTypes.boolean,
toggleSidebar: React.PropTypes.func
};
Main
class Main extends React.Component {
render () {
return (
<article className="main">
{ this.props.children }
</article>
);
}
}
Demostración
Código completo (demo más abajo):
class Dashboard extends React.Component {
constructor (props) {
super(props);
this.state = {
sidebarVisible: true
}
}
getChildContext () {
const _this = this;
return {
sidebarVisible: _this.state.sidebarVisible,
toggleSidebar: function () {
_this.setState({
sidebarVisible: !_this.state.sidebarVisible
});
}
};
}
render () {
return (
<section className="container">
<Sidebar />
<Content />
</section>
);
}
}
Dashboard.childContextTypes = {
sidebarVisible: React.PropTypes.boolean,
toggleSidebar: React.PropTypes.func
};
class Sidebar extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
componentDidMount () {
this.setState({
visible: this.context.sidebarVisible
});
}
componentWillUpdate(props, state, ctx) {
if (this.state.visible !== ctx.sidebarVisible) {
this.setState({
visible: ctx.sidebarVisible
});
}
}
render () {
let classes = 'sidebar ';
classes += this.state.visible ? 'visible' : '';
return (
<aside className={ classes }></aside>
);
}
}
Sidebar.contextTypes = {
sidebarVisible: React.PropTypes.boolean
};
class Content extends React.Component {
render () {
return (
<section className="content">
<Top />
<Main />
</section>
);
}
}
class Top extends React.Component {
render () {
return (
<header className="top">
<div className="hamburger" onClick={this.toggleMenu.bind(this)}>
<i className="material-icons">reorder</i>
</div>
</header>
);
}
toggleMenu () {
this.context.toggleSidebar();
}
}
Top.contextTypes = {
sidebarVisible: React.PropTypes.boolean,
toggleSidebar: React.PropTypes.func
};
class Main extends React.Component {
render () {
return (
<article className="main">
{ this.props.children }
</article>
);
}
}
let node = document.getElementById('app');
ReactDOM.render(<Dashboard />, node);
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.container .sidebar {
background-color: #34495e;
flex: 0 0 70px;
height: 100%;
transition: all .23s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.container .sidebar.visible {
flex: 0 0 250px;
}
.container .content {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
}
.container .content .top {
align-items: center;
background-color: #fff;
display: flex;
flex: 0 0 50px;
padding: 0 1rem;
}
.container .content .top .hamburger {
color: #777;
cursor: pointer;
max-height: 24px;
}
.container .content .main {
background-color: #F2F8FA;
flex: 1;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<div id="app"></div>
Puedes ver el código en funcionamiento en éste Pen.