如何禁用菜单中的链接组件之一？

Question

对不起，如果标题没有清楚地表达我的问题。

<div className={"floated left column header-items " + this.props.active}>
  <Link onClick={this.headerItemClicked.bind(this)} className='home' to="/home" style={comStyles().headerItem}>Home</Link>
  <Link onClick={this.headerItemClicked.bind(this)} className='setting' to="/setting" style={comStyles().headerItem}>Setting</Link>
</div>

那里有一个带有一些链接的标题组件。我现在要做的是检查当前页面是否为主页，然后主页链接将被禁用。

我的想法是用路径检查类名。如果有更简单的方法可以实现这一点，我需要吗？

我的解决方法如下：

   headerItemClicked(e){
        if(e.target.className == this.props.active){
          e.preventDefault();
        }    
    }

Answer 1

我喜欢 CSS pointer-event 方式。 首先你不应该硬编码你的Link，创建数组然后循环它来渲染Link。

那么你的组件应该是这样的：

const routes = [
{
  name: 'home',
  path: '/home'
},
{
  name: 'about',
  path: '/about'
}];

const listOfLink = routes.map((route) => (
  <Link to={route.path} disabled={this.props.active === route.name}>{route.name}</Link>
);

然后添加css：

a[disabled] { pointer-events: none; }