Question

我有一个Nav.js组件并使用http://bokuweb.github.io/re-bulma/#NavToggle进行样式化。

当我点击<NavToggle/>组件附带的汉堡包菜单时，我试图这样做，我可以将道具设置为isActive并显示菜单。

这是我当前的Nav.js代码：

import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';



export default class nav extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.showToggleNav = this.showToggleNav.bind(this);
  }

  showToggleNav() {
    this.props.isActive
  }



  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
              <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle onClick={this.showToggleNav} />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }
}

是的，我正在使用盖茨比。我喜欢它。它帮助我学习了React。

Answer 1

因此，您需要此组件了解导航是否处于活动状态，您需要能够将该状态从一个更改为另一个，并且您需要将该信息从此组件传递给其子组件。这将是一个使用component state的好地方。

我看到你在这里试图用这个函数设置isActive变量：

  showToggleNav() {
    this.props.isActive
  }

由于以下几个原因，这不起作用：

Props are read-only且无法修改。
此函数实际上并没有做任何事情 - 它只是在调用它时访问isActive道具并且不对它做任何事情。

所以，你需要做的是使用 state 而不是props，并更新你的函数以实际修改组件状态的值。

更新构造函数以将本地状态添加到组件：

  constructor(props) {
    super(props);
    this.showToggleNav = this.showToggleNav.bind(this);
    this.state = {
        isActive: false
    };
  }

使用名为setState的React组件函数更新函数以设置调用时的状态：

  showToggleNav() {
     this.setState({ isActive: true });
  }

更新您的渲染方法，通过其道具通知子组件导航处于活动状态：

  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
                <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle isActive={this.state.isActive} onClick={this.showToggleNav} />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }

这里我已将它传递给NavToggle，但你可以将它添加到需要以类似方式知道活动状态的其他子组件。

React Hamburger菜单onclick

1 个答案: