Как осуществил бы этот код язык сценариев JavaScript в Render reactjs?

Я хочу осуществить в моем сайте nav бар, у которого есть действия с языком сценариев JavaScript, но не знаю, как осуществлять язык сценариев JavaScript в render моего компонента.

Это код в языке сценариев 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');
  });  
});

И этот мой компонент в 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
задан 14.01.2017, 01:26
0 ответов

Согласно которому я вижу, ты считаешь осуществленным sidebar и посредством кнопки гамбургер ты чередуешь Ваш visiblidad.

но поскольку я новый способ в этом не, как осуществление языка сценариев JavaScript в render моего компонента

Это оставляет в стороне другие выборы как Передож. Однако, есть разы, в которых простые решения находятся перед нами, и всегда мы выбираем сложное.

чтобы делать то, что ты хочешь только, тебе достаточно знать пару вещей:

React был создан, чтобы разделять UI на маленькие переиспользуемые модули. Вместо того, чтобы у всей UI есть в единственном файле HTML, ты разделяешь этот файл на маленькие куски и превращаешь их в компоненты. Тот же подход используется в других frameworks как Vue.js 2, Ember.js и Угловой 2.

Мы будем предполагать следующую сцену; наша UI они состоят из 4 элементов:

  • Sidebar (боковое меню)
  • Top (верхний брусок, где - dropdown пользователя)
  • Main (где идет главный контент)
  • Content (который приютит Top и Main)

И все это соразмеряет 5to компонент, 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
};

Важная часть здесь Dashboard.childContextTypes и getChildContext. Когда он используется context, ты можешь иметь propieades в нисходящей форме; а именно, отец имеет свойства с Вашими детьми, которые могут идти с текста до функций.

Посредством childContextTypes ты определяешь свойства, которые будут иметься, и, кроме того, тип каждой из них. Ты можешь видеть список типов здесь. Обязательно поставлять стандартную настройку для них, и это делается посредством getChildContext.

Свойство sidebarVisible покажи состояние sidebar и toggleSidebar функция, которая меняет состояние и поэтому, способствует тому, чтобы стал отвечающим совремнным требованиям компонент и также, свойство sidebarVisible, чередуя между true и 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
};

Дети должны определять также типы, которые они хотят считать доступными в context и ésto он делается посредством contextTypes. Сделав ésto ты будешь иметь доступно sidebarVisible в объекте context (this.context).

Когда actualize состояние sidebarVisible Dashboard то, что он переместит, состоит в том, что станет отвечающей совремнным требованиям также стоимость context и он окажется отраженным во всех детях. В составляющем мы захватываем нового context благодаря методу жизненного цикла componentWillUpdate и мы обновляем состояние с новой стоимостью context. То, что он переместит далее, что, когда состояние становится отвечающим современным требованиям Sidebar повернется в renderizar компонент и линия classes += this.state.visible ? 'visible' : ''; он возвратит visible или я опустошаю, что будет способствовать тому, чтобы меню стало или нет видимым посредством класса 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>
    );
  }
}

Демонстрация

Полный код (demo ниже):

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>

Ты можешь видеть код в функционировании в этом Пен.

2
ответ дан 03.12.2019, 17:42