在 React 中禁用 link 的更简单方法？

Question

我想在某些情况下禁用 Link：

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

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

Answer 1

您可以设置 link 的 onClick 属性：

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

然后使用光标属性.

通过 css 禁用悬停效果

.disabledCursor { 
  cursor: default;
}

我认为应该可以解决问题？

Answer 2

您的代码看起来已经很简洁了。不确定你为什么想要一种“更简单”的方式。我会按照你的方式去做。

但是，这里有一些备选方案：

使用指针事件

这个可能是你能得到的最简短和最甜蜜的：

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

使用 onClick 侦听器

作为替代方案，您可以使用通用 <a> 标记并为条件添加 onClick 侦听器。如果您有很多 link 想要控制它们的状态，这可能更适合，因为您可以对所有它们使用相同的功能。

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

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

假设您使用的是 context.router，以上内容将有效。如果没有，请添加到您的 class:

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

OP 代码的更好版本

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

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

Answer 3

我认为你应该将 属性设置为=null 以设置禁用 link.

<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.whosebug.com';

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

Answer 5

一个好的解决方案是将 onClick() 与 event 对象一起使用。只需在您的 jsx 中执行此操作：

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

并在您的 _onClick 函数中：

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

React 中的完整示例：

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

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

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

Answer 6

简而言之，在 React 中禁用 link 更简单的方法？

<Link to="#">Text</Link>

Answer 7

将 to 中的 # 传递给 Link 应该可以解决问题

您可以根据需要定义 link。如果你想禁用它，只需在 props.link

中传递 #

render() {
    return (<li><Link to={props.link}>Test</Link></li>);  
}

在 React 中禁用 link 的更简单方法？

Easier way to to disable link in React?

javascript

href

reactjs

react-router

使用指针事件

使用 onClick 侦听器

OP 代码的更好版本