javascript - 在 React 中禁用链接的更简单方法？

Question

我想禁用 Link在某些情况下:

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

<Link>必须指定 to , 所以我不能禁用 <Link>我必须使用 <a>

Answer 1

您可以设置链接的 onClick 属性:

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

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

.disabledCursor { 
  cursor: default;
}

我认为这应该可以解决问题？