Question

我有三个组件app.js，header.js和menu.js.当我点击标题组件中的菜单按钮切换（显示/隐藏）菜单组件（菜单侧栏）时，我正在尝试编码。是否有可能在没有jQuery的情况下使用两个组件进行此类通信？我试过这个教程但没有成功https://www.codementor.io/chrisharrington/how-to-build-a-sliding-menu-using-react-js-and-less-css-du107mpij

app.js ：

import React, { Component } from 'react';

// components
import Header from './components/header';
import Menu from './components/menu';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Menu />  
      </div>
    );
  }
}

export default App;

header.js ：

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
            <header id="header">
                <h1><a href="/">Lorem</a></h1>
                <nav className="links">
                    <ul>
                        <li><a href="/">Lorem</a></li>
                        <li><a href="/">Ipsum</a></li>
                        <li><a href="/">Feugiat</a></li>
                        <li><a href="/">Tempus</a></li>
                        <li><a href="/">Adipiscing</a></li>
                    </ul>
                </nav>
                <nav className="main">
                    <ul>
                        <li className="search">
                            search
                        </li>
                        <li className="menu">
                            <a className="fa-bars" href="#menu">Menu</a>
                        </li>
                    </ul>
                </nav>
            </header>
        );
    }
}

export default Header;

menu.js ：

import React, { Component } from 'react';

class Menu extends Component {
    render() {
        return (

    <section id="menu">
        <section>
            <form className="search" method="get" action="#">
                <input type="text" name="query" placeholder="Search" />
            </form>
        </section>
        {/* Links */}
        <section>
            <ul className="links">
                <li>
                    <a href="/">
                        <h3>Lorem ipsum</h3>
                        <p>Feugiat tempus veroeros dolor</p>
                    </a>
                </li>
                <li>
                    <a href="/">
                        <h3>Dolor sit amet</h3>
                        <p>Sed vitae justo condimentum</p>
                    </a>
                </li>
                <li>
                    <a href="/">
                        <h3>Feugiat veroeros</h3>
                        <p>Phasellus sed ultricies mi congue</p>
                    </a>
                </li>
                <li>
                    <a href="/">
                        <h3>Etiam sed consequat</h3>
                        <p>Porta lectus amet ultricies</p>
                    </a>
                </li>
            </ul>
        </section>
    </section>
        );
    }
}

export default Menu;

Answer 1

你想要实现的是React中非常常见的模式。哪个好，因为你可以轻松实现它。您需要将信息从一个组件传递到另一个组件。所以你需要某种状态管理。有不同的方法。您的用例很简单，因此无需过度工程。你能做什么：

传递道具和功能（适用于此处）

React使用unidrectional数据流。它总是从父组件到子组件，默认情况下，子组件不能更改此数据（称为props）。你是这样的：<Header myvariable='something'/>。

您可能想知道：如果我只能传递信息DOWN如何传递它，在您的情况下，从菜单到标题时单击按钮。解决此问题的反应模式不是直接更改数据，而是将函数从父组件传递给更改数据并分配新值的子组件。让我演示给你看。这是你的应用：

- APP
-- Header
-- Menu

您的父母是APP，孩子是标题和菜单。要从Menu获取数据到标题，您需要通过执行以下操作启用APP来管理此数据：

将您需要的变量定义为state of app，例如showMenu（在下面的示例中，我使用构造函数来设置默认值）。
将toggleMenu传递给包含<Menu showMenu={showMenu} /＆gt;
传递一个函数，将showMenu从App更改为Header，以启用标题来改变切换（或者更确切地说：在App中调用实际改变它的函数）。

这是一个工作沙箱：https://codesandbox.io/s/l4n7p435kz

根据您的情况简化：

App
class App extends Component {

constructor(props){
    super(props);
    this.state = { showMenu: true };
}

toggleMenu() {
    this.state.showMenu = !this.state.showMenu //Flips true/false
}

render() {
    return (
      <div className="App">
        <Header toggleFunction={this.toggleMenu}/>
        <Menu showMenu={this.state.showMenu}/>  
      </div>
    );
  }
}

现在您可以在标题中使用toggleMenu函数，如下所示：

<button onClick={this.props.toggleMenu()}/>

菜单组件中的变量：

return (
    {this.props.showMenu && <div> ... your menu code </div>} 
)

你可能需要考虑一些问题才能完成这项工作，但如果你努力只是评论它。

使用React-Redux（矫枉过正）

如果组件之间有很多通信，并且需要长时间传递它们，那么事情会变得笨拙。对于这些情况，您可以使用redux。它基本上封装了所有状态更改，并在单独的存储中记住它们。您可以将它与具有一些标准接口的状态数据库进行比较。请随意read up on redux，但对于您的情况，可以做的更简单。

如何单击菜单按钮切换显示/隐藏菜单侧栏组件

1 个答案: