在 React 中禁用链接的更简单方法

Easier way to to disable link in React?

本文关键字：更简单 方法 链接 React      更新时间：2023-09-26

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

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

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

您可以设置链接的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;
}

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

你的代码看起来已经很干净和苗条了。不知道为什么你想要一种"更简单"的方式。我会完全按照你的做法去做。

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

<小时 />

使用指针事件

这个可能和你能得到的一样简短而甜蜜：

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

使用 onClick 侦听器

或者，您可以使用通用<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
}
<小时 />

更好的OP代码版本

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

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

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

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

在您的_onClick函数中：

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

反应中的完整示例：

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>
        )
    }
}

只是使URL为空似乎就可以解决问题：

const url = isDisabled ? null : 'http://www.stackoverflow.com';
return (
  <a href={url}>Click Me</a>
);

简而言之，在 React 中禁用链接更简单？

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

我认为你应该 atrribute to=null 来设置禁用链接。

<Link to=null />

您的代码：

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

# to道具传递给链接应该可以为您解决问题

您可以根据需要定义链接。 如果要禁用它，只需将#传递props.link 

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

我不喜欢任何答案。令人惊讶的是，如果您使用的是引导程序，则禁用类将使链接处于非活动状态。因此，无需将路径更改为#或任何东西。

<Link to='something/else' className='nav-link disabled'>Transactions Detail</Link>

在链接标签中使用它。我在功能组件中使用它，它工作正常。

<Link style={{pointerEvents: 'none'}}>

您可以有条件地设置 Link 组件的to prop。当您将其设置为 # 时，该链接将被禁用。

render() {
    return (
      <li>
        {
          <Link to={`${this.props.canClick ? '/' : '#'}`}>Test</Link>
        }
      </li>
    )  
}
相关文章：