在 React 中禁用链接的更简单方法? [英] Easier way to to disable link in React?
本文介绍了在 React 中禁用链接的更简单方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在某些情况下禁用Link
:
I want to disable Link
in some condition:
render() {
return (<li>{this.props.canClick ?
<Link to="/">Test</Link> :
<a>Test</a>}
</li>)
}
必须指定
to
,所以我不能禁用 而我必须使用
<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={ (event) => event.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;
}
我认为这应该可以解决问题?
I think that should do the trick?
这篇关于在 React 中禁用链接的更简单方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文