更容易在React中禁用链接的方法？

Question

我想在某些条件下禁用Link：

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <a>Test</a>}
    </li>)  
}

<Link>必须指定to，所以我无法禁用<Link>，我必须使用<a>

Answer 1

你可以设置链接的onClick属性：

render () {
  return(
    <li> 
    { 
      this.props.notClickable
      ? <Link to="/" className="disabledCursor" onClick={ () => e.preventDefault() }>Link</Link>
      : <Link to="/" className="notDisabled">Link</Link>
    }
    </li>
  );
};

然后使用cursor属性通过css禁用悬停效果。

.disabledCursor { 
  cursor: default;
}

我认为应该这样做？

Answer 2

你的代码看起来已经非常整洁。不确定为什么你想要一个“更容易”的方式。我会完全按照你的方式去做。

但是，这里有一些替代方案：

---

Using pointer-events

这个可能就像你能得到它一样简短而甜蜜：

render() {
    return (<li>
      <Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
    </li>)
}

---

Using onClick listener

作为替代方案，您可以使用通用的<a>标记并为条件添加onClick监听器。如果您有许多链接要控制其状态，这可能更适合，因为您可以在所有链接上使用相同的功能。

_handleClick = () => {
  if(this.props.canClick) {
    this.context.router.push("/");
  }
}

render() {
   return (
     <li>
       <a onClick={this._handleClick}>Test</a>});
     </li>
   );  
}

假设您正在使用context.router，上述方法将起作用。如果没有，请添加到您的班级：

static contextTypes = {
  router: React.PropTypes.object
}

---

Better version of OP code

正如我上面提到的，我仍然认为你的方法是“最好的”。您可以用span替换anchor标记，以消除已禁用链接的样式（例如指针光标，悬停效果等）。

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <span>Test</span>}
    </li>)  
}

Answer 3

我认为你应该将属性设置为= null来设置禁用链接。

<Link to=null />

你的代码：

render() {
    return (<li>
        <Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
    </li>)  
}

Answer 4

只是将URL设为null似乎可以解决问题：

const url = isDisabled ? null : 'http://www.stackoverflow.com';

return (
  <a href={url}>Click Me</a>
);

Answer 5

最好的解决方案是使用onClick()和event对象。只需在你的jsx中执行此操作：

<Link to='Everything' onClick={(e) => this._on(e)}

在你的_onClick功能：

_onParent = (e) => {
    e.preventDefault()
}

React中的完整示例：

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

export default class List extends Component {
    _onParent = (e) => {
        e.preventDefault()
    }

    render(){
        return(
            <div className='link-container'>
                <Link to='Something' onClick={e => this._onParent(e)}                     
            </div>
        )
    }
}