Question

我使用React作为模板引擎进行表达并尝试将css类添加到相应的锚元素中。

我目前通过控制器将请求路径传回Navbar组件。以下是我的代码。我觉得我太近了......

更新代码（2017年5月31日）：

const React = require('react');


class Navbar extends React.Component {
  constructor(...props) {
    super(...props);
    this.setActiveTab = this.setActiveTab.bind(this)
    this.state = {
      currentPage: "/"
    }
  }

  setActiveTab(e) {
    console.log(e.target)
    this.setState({
      currentPage: e.target.href 
    })
  }

  render() {
    const { path } = this.props
    let classString = path === this.state.currentPage ? 'nav-item is-tab is-active' : 'nav-item is-tab'

    return (
      <nav className="nav">

        <div className="nav-left">
          <a className="nav-item">
            <h1>CREATORS NEVER DIE</h1>
          </a>
        </div>

        <div className="nav-right nav-menu">
          <a href="/" className={classString} onClick={this.setActiveTab}>
            Home
          </a>
        </div>


      </nav>
    )
  }
}

module.exports = Navbar;

Answer 1

有多种方法可以实现这一目标。

我对你应用的其余部分了解不多，但这是你必须采取的一般方法：

如果它是活动路径，首先修改checkActiveTab以返回布尔值：

checkActiveTab = (path) => {
 return path === this.state.currentPage;
}

（旁注：您是否包含完整的组件？我不确定如何检查this.state，因为您没有this checkActiveTab函数绑定

接下来，当您渲染选项卡时，您将检查它是否是当前页面，然后我们将设置一个活动类：

<a href="/" className={`nav-item is-tab ${ this.checkActiveTab('Home') ? 'is-active' : '' }`}>
  Home
</a>

Answer 2

如果我是这样的话我可以用这种方式做到这一点

我本可以将此导航作为组件，并添加一些逻辑来添加活动类。

const Nav = (props) => {
    let classString = props.isActive ? 'nav-item is-tab is-active' : 'nav-item is-tab'
    return (<div className="nav-right nav-menu">
          <a href={props.path} className={classString}>
            Home
          </a>
        </div>
    )
}

现在你可以编写基于父组件的逻辑来检查发送的路径，并为Nav组件编写isActive boolean。

根据网址，我可以识别哪个导航将isActive道具设为true。

例如

<Nav path={this.props.path} isActive ={this.props.path === this.state.currentPage} </Nav>

使用React将标签设置为活动

2 个答案: