Question

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

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

Answer 1

你应该这样做：

let component;

component=this.props.live? <Link to={...}> Live </Link>: <div> Not Live </div>
 render() {
    {component}
  }

干杯：）

Answer 2

this.props.live
? <Link to={...}> Live </Link>
: <div> Not Live </div>

Answer 3

您可以使用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

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

3 个答案: