Question

我有导航按钮（典型的左面板仪表板种类），使用链接加载主要内容区域中的页面。

var {Link, History} = require('react-router');
var React = require('react');

var NavPanelButton = React.createClass({

  mixins: [History],

  click: function (e) {
    e.preventDefault();
    this.history.pushState(null, this.props.link);
  },

  render: function () {
    var iconClasses = `fa fa-${this.props.icon} fa-fw`;
    return (
      <div className="nav-panel-button" onClick={this.click}>
        <Link to={this.props.link}>
          <i className={iconClasses}/> {this.props.children}
        </Link>
      </div>
    );
  }

});

单击按钮时，我需要将其状态更改为选中状态，以便添加CSS类并更改其背景颜色。

使用React Router执行此操作的正确方法是什么？我可以让按钮管理他们自己选择的状态，但是会因为用户没有在当前页面上保存更改而阻止和中止导航（按钮点击）。

Answer 1

Link有一个名为activeClassName的属性，您可以使用该属性。无论指定了什么值，className都会在Link组件处于活动状态时添加到其中。

您还可以使用history中提供的props（如果是路由组件）或获取history context其他组件并使用this.props.history.isActive('/pathToCheck') {1}}

示例：

import { Link, History } from 'react-router'

const Tab = React.createClass({
  mixins: [ History ],
  render() {
    let isActive = this.history.isActive(this.props.to, this.props.query)
    let className = isActive ? 'active' : ''
    return <li className={className}><Link {...this.props}/></li>
  }
})

// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab href="foo">Foo</Tab>

您可以使用context代替History mixin来使用相同内容。

反应路由器和导航按钮

1 个答案: