@xonar
А смысл?

Как продублировать функцию в React.js?

Здравствуйте. На сайте есть боковое меню, которое выдвигается. Хочу создать ещё одно меню, но уже прикрепив его к правой стороне. Продублировать получилось, но оно не открывается, так как я не могу продублировать функции по раскрытию меню. Код приведу ниже.

/* @flow */
import React from "react";
import { compose, onlyUpdateForKeys } from "recompose";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import io from "socket.io-client";
import type { UserType } from "../user/types";
import { selectors as userSelectors } from "../user/logicBundle";
import { addModal } from "../modals/logicBundle";
import Header from "./Header";
import Navbar from "./Navbar";
import Navbarpravo from "./Navbarpravo";
import Stats from "./Stats";
import Footer from "./Footer";
import "./PageWrapStyle.scss";

const forceWindowResize = () => {
  const event = document.createEvent("HTMLEvents");
  event.initEvent("resize", true, false);
  window.dispatchEvent(event);
};

export class PageWrap extends React.PureComponent {
  state: {
    isShowNavbar: boolean,
  } = {
    isShowNavbar: false,
  };
  
  // noinspection JSMethodCanBeStatic
  componentDidMount() {
    window.socket.online = io("/online", window.socket.opts);
  }

  props: {
    // noinspection JSUnresolvedVariable
    children: React$Element<*>,
    user: UserType,
    actions: Object,
  };

  openInventoryModal = () => {
    this.props.actions.addModal({ type: "INVENTORY" });
  };

  openPaymentModal = () => {
    this.props.actions.addModal({ type: "PAYMENT" });
  };

  toggleNavbar = () => {
    this.setState({ isShowNavbar: !this.state.isShowNavbar });
    const task = setInterval(forceWindowResize, 10);
    setTimeout(() => clearInterval(task), 300);
  };
  
  render() {
    const { children } = this.props;
    const pageName = children && children.pageName ?
      children.pageName : "";
    return (
      // $FlowFixMe
      <div className={`page-wrap ${pageName} ${this.state.isShowNavbar ? "show-navbar" : ""}`.trim()}>
        <Header
          user={this.props.user}
          openInventoryModal={this.openInventoryModal}
          openPaymentModal={this.openPaymentModal}
        />
        <Navbar toggleNavbar={this.toggleNavbar} />
		<Navbarpravo toggleNavbarpravo={this.toggleNavbarpravo} />
        <div className="content">
          <div className="container">
            <Stats />
            {children}
            <Footer />
          </div>
        </div>
      </div>
    );
  }
}


export const enhance = compose(
  connect(
    state => ({
      user: userSelectors.getUser(state),
    }),
    dispatch => ({
      actions: bindActionCreators({
        addModal,
      }, dispatch),
    })
  ),
  onlyUpdateForKeys(["children", "user"])
);

export default enhance(PageWrap);


Вот этот кусок

export class PageWrap extends React.PureComponent {
  state: {
    isShowNavbar: boolean,
  } = {
    isShowNavbar: false,
  };
который закрывается } в самом конце почти и вот ещё один кусок кода

toggleNavbar = () => {
    this.setState({ isShowNavbar: !this.state.isShowNavbar });
    const task = setInterval(forceWindowResize, 10);
    setTimeout(() => clearInterval(task), 300);
  };


отвечают эти два куска кода за раскрытие меню, просто продублировав выдаёт ошибку в консоли, даже скомпилировать не даёт.

Главное меню называется Navbar
Дублирую с именем Navbarpravo

Помогите.
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 1
nepritimov_m
@nepritimov_m
Frontend dev.
Создаешь отдельный компонент Menu, в котором его позиция задается приходящим пропсом, допустим position. Реализуешь в компоненте всю сопутствующую логику (открывание/закрывание и т.п.).
Далее, добавляешь в рендер родителя 2 экземпляра компонента меню, вот только в пропсах одному в position передаешь left, второму right.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект