时间戳

首页 > 解决方案 > 我怎样才能调用反应状态不同的js

javascript - 我怎样才能调用反应状态不同的js

问题描述

我想改变状态不同的 js 但我不能，我有一个带有 react-burger-menu 的 sidebar.js

我想在 header.js 中调用和更改 toggleMenu 状态

当我单击菜单链接时，我想切换 react-burger-menu 但不同的 js。这是行不通的。

侧边栏.js 

 import React from "react";
    import PropTypes from "prop-types";
    import { reveal as Menu } from "react-burger-menu";
    import * as FontAwesome from "react-icons/lib/fa";

    export default class SidebarMenu extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          menuOpen: false
        }
      }

      handleStateChange (state) {
        this.setState({menuOpen: state.isOpen})
      }

      closeMenu () {
        this.setState({menuOpen: false})
      }

      toggleMenu () {
        this.setState({menuOpen: !this.state.menuOpen})
      }

      render () {
        return (
          <div>
            <Menu
              isOpen={this.state.menuOpen}
              onStateChange={(state) => this.handleStateChange(state)}
            >
             // menu content 

            </Menu>
          </div>
          </div>
        )
      }
    }

header.js 有 react-burger-menu 的链接 

import React from 'react';
import PropTypes from 'prop-types';
import SidebarMenu from "../SidebarMenu";

export default class Header_Video extends React.Component {


  render() {
    return (   
      <Container>
        <Row>
          <Col md={5} sm={12} xs={12} className="text-left mobile-right">
            <div className="bar__module">

              <a onClick={this.toggleMenu}>Menu</a>
            </div>
          </Col>     
        </Row>
      </Container>    
  );
  }
}

感谢帮助

注意：我有一个 app.js 的所有文件导入。我想在 header.js 中运行 toggleMenu

应用程序.js

const TemplateWrapper = ({ children }) => (
  <div id="outer-container">
    <SidebarMenu />
    <main id="page-wrap" className="page-wrap">
      <HeaderVideo /> {children()}
      <Footer />
    </main>
  </div>
);

标签： javascriptreactjsreact-redux

解决方案

menuOpen应该处于两个组件的父状态。

例子：

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      menuOpen: false
    }
  }

  closeMenu = () => {
    this.setState({menuOpen: false})
  }

  toggleMenu = () => {
    this.setState({menuOpen: !this.state.menuOpen})
  }

  render() {
    return (
      <div>
        <SidebarMenu isMenuOpen={this.state.menuOpen} toggleMenu={this.toggleMenu} />
        <Header toggleMenu={this.toggleMenu} />
      </div>
    )
  }
}

推荐阅读