ReactJS + React Router:如何禁用React-Router的<link />链接?

时间:2017-01-11 21:01:03

标签: javascript html css reactjs react-router

使用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>,但没有用。

将支持并接受答案。谢谢!

3 个答案:

答案 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