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

我想在某些情况下禁用

链接

：

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

render（）{
返回（
{this.props.canClick？
测试：
测试}
）
}

---

必须将

指定为

，因此我不能禁用

，我必须使用

您可以只设置链接的onClick属性：

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

---

我认为应该这样做吧？

您的代码看起来已经非常干净纤细了。不知道你为什么想要一个“更简单”的方法。我会像你那样做的

但是，以下是一些备选方案：

---

使用指针事件 这个可能是你能得到的最短最甜的：

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

假设您使用的是

context.router

，上述功能将起作用。如果没有，请添加到您的类中：

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

---

OP代码的更好版本 正如我上面提到的，我仍然认为你的方法是“最好的”。您可以将锚定标记替换为跨度，以消除禁用链接的样式（例如指针光标、悬停效果等）

render（）{
返回（
{this.props.canClick？
测试：
测试}
）
}

我认为您应该将分配到=null以设置禁用链接

<Link to=null />

您的代码：

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

render（）{
返回（

试验
）
}

只需将URL设为空似乎就可以做到：

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

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

const url=isDisabled？空：'http://www.stackoverflow.com';
返回(
);

一个好的解决方案是将

onClick（）

与

事件

对象一起使用。只需在jsx中执行此操作：

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

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

import React，{Component}来自“React”
从“react router dom”导入{Link}
导出默认类列表扩展组件{
_onClick=（e）=>{
e、 预防默认值（）
}
render（）{
返回(
这个。_onClick（e）}
)
}
}

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

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

文本

将

#

中的

传递到
道具链接应该可以帮到你

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

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

render（）{
返回（
测试
）；
}
如果可能，请编辑您的答案，并举例说明如何在CSS中禁用悬停效果？这将使未来可能不知道如何做的新用户更容易：）是的，我的错。如果我是对的，这里有一个解决方案编辑了原始帖子。这是禁用链接的有效方法，但你应该在代码中添加条件。我认为答案上的onClick方法需要有一个参数“e”，比如，（e）=>e.preventDefault（）。这不会阻止文本看起来像链接。这没有在我的应用程序中禁用链接。您是否有参考链接或文档？设置
会返回以下错误：
警告：失败的道具类型：道具“to”在“link”中标记为必需，但其值为“null”。
_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>
        )
    }
}

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

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