Question

我需要在点击标签上添加活动类css，这是代码：

<ul>
 <li className="step"><Link to={`${this.props.match.url}/personal-information`} >You <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/content`}>Content <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/profile-information`}>Profile <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/rewards`}>Rewards <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/goals`}>Goals <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/thanks`}>Thanks <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/payment`}>Payment <i className="fa fa-long-arrow-right"></i></Link></li>
 <li className="step"><Link to={`${this.props.match.url}/launch`}>Launch! </Link></li>
</ul>

Answer 1

You can use NavLink, which is

＆＃34;将添加样式属性的特殊版本当与当前URL匹配时，呈现的元素。＆＃34;

It has a property called activeClassName which handles the active link.

example :

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

可以在https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

中找到更多信息

在react js的选定选项卡上添加活动的css类

1 个答案: