如何在reactjs中禁用链接？

Question

我在我的reactjs应用程序中有这个:

import Link from 'react-router/lib/Link'

一直试图禁用此链接,但这没有达到预期的效果:

<Link disable={true}/>

它只是让它变得不可见.如何禁用(基于条件)reactjs Link？

Answer 1

包含react-router上的许多问题,Link Component中没有支持禁用属性,因此您可以尝试使用此问题:

1. onClick事件

使用preventDefault()处理onclick事件.

/* YourComponent.js */
class YourComponent extends React.Component {
  render() {
    return (
      <Link onClick={e => e.preventDefault()} />
    );
  }
}

2. CSS的pointer-events属性

/* YourComponent.js */
class YourComponent extends React.Component {
  render() {
    return (
      <Link className='disabled-link' />
    );
  }
}

/* css file */
.disable-link {
  pointer-events: none;
}

或者你可以使用内联样式

/* YourComponent.js */
class YourComponent extends React.Component {
  render() {
    return (
      <Link style={{ pointerEvents: 'none' }} />
    );
  }
}

我使用的是方法2,在我的项目中对我来说更清楚.