更容易在React中禁用链接的方法？ [英] Easier way to to disable link in React?

问题描述

我想在某些条件下禁用 Link ：

I want to disable Link in some condition:

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <a>Test</a>}
    </li>)  
}

< Link> 必须指定到，因此我无法停用< Link> 我必须使用< a>

<Link> must specify to, so I can not disable <Link> and I have to use <a>

推荐答案

你可以设置链接的onClick属性：

You could just set set the link's onClick property:

render () {
  return(
    <li> 
    { 
      this.props.notClickable
      ? <Link to="/" className="disabledCursor" onClick={ () => e.preventDefault() }>Link</Link>
      : <Link to="/" className="notDisabled">Link</Link>
    }
    </li>
  );
};

然后使用cursor属性通过css禁用悬停效果。

Then disable the hover effect via css using the cursor property.

.disabledCursor { 
  cursor: default;
}

我认为应该这样做？

这篇关于更容易在React中禁用链接的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！