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>

有一个标题组件，其中包含一些链接。我现在要做的是检查当前页面是否为Home，然后将禁用Home链接。

我的想法是用路径检查classname。如果有更简单的方法可以达到这个目的，我可能需要吗？

我的解决方案如下：

   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; }

如何在菜单中禁用其中一个Link组件？

1 个答案: