Question

我是ReactJS的新手，我真的很喜欢这个，所以请耐心等待。我想知道是否有办法使用react路由器向我的导航链接添加活动类。这就是我的代码看起来......

  import React, { Component, PropTypes } from 'react';
  import history from '../../core/history';

  function isLeftClickEvent(event) {
    return event.button === 0;
  }

  function isModifiedEvent(event) {
    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
  }

  class Link extends Component { // eslint-disable-line react/prefer-stateless-    function

   static propTypes = {
    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
    onClick: PropTypes.func
  };

  handleClick = (event) => {
    let allowTransition = true;

    if (this.props.onClick) {
      this.props.onClick(event);
    }

    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
      return;
    }

    if (event.defaultPrevented === true) {
      allowTransition = false;
    }

    event.preventDefault();

    if (allowTransition) {
      if (this.props.to) {
        history.push(this.props.to);
      } else {
        history.push({
          pathname: event.currentTarget.pathname,
          search: event.currentTarget.search
        });
      }
    }
  };

  render() {
    const { to, ...props } = this.props; // eslint-disable-line no-use-before-define
    return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />;
  }

}

export default Link;


import React, { PropTypes } from 'react';
import cx from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Navigation.css';
import Link from '../Link';


function Navigation({ className }) {
  return (
    <div className={cx(s.root, className)} role="navigation">
      <Link className={s.link + ' fa fa-dribbble'} to="/dribbble"/>
      <Link className={s.link + ' fa fa-behance' } to="/behance"/>
      <Link className={s.link + ' fa fa-linkedin' } to="/linkedin"/>
      <Link className={s.link + ' fa fa-twitter' } to="/twitter"/>
      <Link className={s.link + ' fa fa-instagram' } to="/instagram"/>
      <Link className={s.link + ' fa fa-vimeo' } to="/vimeo"/>
    </div>
  );
}

Navigation.propTypes = {
  className: PropTypes.string
};

export default withStyles(s)(Navigation);

我想要做的是添加一个这样的活动类，例如：

<a class="link active">Home</a>
<a class="link">About</a>
<a class="link">Contact</a>
<a class="link">Work</a>
<a class="link">Support</a>

关于如何做到这一点的任何想法？我一直在搞乱反应，但我找不到一个简单的方法来做它..

Answer 1

您可以更改活动链接的样式：

import React from 'react';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';

const ACTIVE = { background: '#286090', color: '#fff'}
// In your render
<li><Link to="/case" activeStyle={ACTIVE}>case</Link></li>
<li><Link to="/primarysource" activeStyle={ACTIVE}>primarysource</Link></li>                
<li><Link to="/literature" activeStyle={ACTIVE}>literature</Link></li>           
<li><Link to="/study" activeStyle={ACTIVE}>study</Link></li>

示例可以在react-router示例github https://github.com/reactjs/react-router/blob/master/examples/active-links/app.js

中找到

Answer 2

其实我在这里找到了答案

function Navigation({ className }) {
  return (
    <div className={cx(s.root, className)} role="navigation">
      <Link className={cx(s.link, 'fa fa-dribbble', { 'active': location.pathname === '/dribbble' })} to="/dribbble" />
      <Link className={cx(s.link, 'fa fa-behance', { 'active': location.pathname === '/behance' })} to="/behance" />
      <Link className={cx(s.link, ' fa fa-linkedin', { 'active': location.pathname === '/linkedin' })} to="/linkedin" />
      <Link className={cx(s.link, ' fa fa-twitter', { 'active': location.pathname === '/twitter' })} to="/twitter" />
      <Link className={cx(s.link, ' fa fa-instagram', { 'active': location.pathname === '/instagram' })} to="/instagram" />
      <Link className={cx(s.link, ' fa fa-vimeo', { 'active': location.pathname === '/vimeo' })} to="/vimeo" />
    </div>
  );
}

注意：这没有React Router

Answer 3

我刚使用了activeClassName =＆＃34;有效＆＃34;

<Link to="/" activeClassName="active">
                            <i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link>

如何将活动类添加到我的导航链接React router？

3 个答案: