使用React-Router的链接,我有这样的设置:
<Link to={...}>{this.props.live? "Live": "Not Live"}</Link>
如果this.props.live
被传入,我想简单地显示一个文本“Live”,它将指向一个新页面。如果未传入this.props.live
,则要显示文本“Not Live”但从中删除超链接/取消激活/禁用它。
有可能这样做吗?我试过了<div style={{pointerEvents: "none"}}>Not Live</div>
,但没有用。
将支持并接受答案。谢谢!
答案 0 :(得分:2)
你应该这样做:
let component;
component=this.props.live? <Link to={...}> Live </Link>: <div> Not Live </div>
render() {
{component}
}
干杯:)
答案 1 :(得分:1)
this.props.live
? <Link to={...}> Live </Link>
: <div> Not Live </div>
答案 2 :(得分:0)
您可以使用evt.preventDefault()
class MyComponent extends React.Component {
constructor(props) {
this.handleLinkClick = this.handleLinkClick.bind(this);
}
handleLinkClick(evt) {
if (!this.props.live) {
evt.preventDefault(); // will prevent redirection
}
}
render() {
<Link onClick={this.handleLinkClick} to={...}>
{this.props.live? "Live": "Not Live"}
</Link>
}
}
速记,但controversial版本
<Link onClick={evt => !this.props.live && evt.preventDefault()} to={...}>
{this.props.live? "Live": "Not Live"}
</Link>
请参阅API docs