1

Quiero implementar en mi sitio un nav bar que tiene unas acciones con JavaScript, pero no sé cómo implementar el JavaScript en el render de mi componente.

Este es el código en JavaScript:

$(document).ready(function () {
  var trigger = $('.hamburger'),
  overlay = $('.overlay'),
  isClosed = false;

  trigger.click(function () {
    hamburger_cross();      
  });

  function hamburger_cross() {

    if (isClosed == true) {          
      overlay.hide();
      trigger.removeClass('is-open');
      trigger.addClass('is-closed');
      isClosed = false;
    } else {   
      overlay.show();
      trigger.removeClass('is-closed');
      trigger.addClass('is-open');
      isClosed = true;
    }
  }

  $('[data-toggle="offcanvas"]').click(function () {
     $('#wrapper').toggleClass('toggled');
  });  
});

Y éste mi componente en ReactJS:

import React from 'react';

class LateralMenu extends React.Component {

  render() {

     return ( 
 <nav className="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul className="nav sidebar-nav">
            <li className="sidebar-brand">
                <a href="#">
                   Bootstrap 3
                </a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-home" /> Home</a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-folder" /> Page one</a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-file-o" /> Second page</a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-cog" /> Third page</a>
            </li>
            <li className="dropdown">
              <a href="#" className="dropdown-toggle" data-toggle="dropdown"><i className="fa fa-fw fa-plus"/> Dropdown <span className="caret"></span></a>
              <ul className="dropdown-menu" role="menu">
                <li className="dropdown-header">Dropdown heading</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-bank" /> Page four</a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-dropbox" /> Page 5</a>
            </li>
            <li>
                <a href="#"><i className="fa fa-fw fa-twitter" /> Last page</a>
            </li>
        </ul>
    </nav>


     );
  }
}

export default LateralMenu;

1 respuesta 1

3

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.

1
  • Muy interesante!! Yo tengo una consulta un poco más allá de todo esto, ¿Cómo podría aprender lo mismo que tú? Me siento un poco confundido por donde empezar. Quisiera ser un buen desarrollador frontend que domine tecnologías como react o angular, entender node.js, crear interfaces en css y más. Un poco de esto u otro. Aspiro a trabajar en Belatrix jeje pero la cosa es cómo comenzar. Tal vez mi duda sea muy compleja de responder y no tenga que ver al caso con esta publicación pero vi tu perfil y te admiro por lo has logrado. Quisiera ser como tú o aún mejor :D!! Commented el 17 dic. 2019 a las 0:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.