如何在 React 中部分应用链接或标签？答案

【问题标题】：How to partially apply Link or a tag in React?如何在 React 中部分应用链接或标签？
【发布时间】：2021-03-05 07:41:33
【问题描述】：

我想像这样停用子容器中的链接。

<Link to="/somewhere">
<div>
activate Link

<div>
deactivate Link
</div>

activate Link
</div>
</Link>

这可能吗？

更具体地说，我在容器内有单选按钮。每次我点击按钮，页面都会改变。我想修复它，当我按下按钮时不要更改页面。

提前致谢。

【问题讨论】：

您能否通过更多代码和数据来改进您的问题。会有所帮助！
您可以使用某些状态并在您希望链接处于活动状态时有条件地呈现链接。如果您呈现的链接不起作用，则不会带来良好的用户体验。
谢谢，我想创建类似系统的推特民意调查，您可以在其中通过单击按钮进行投票，当您单击按钮外部时，您还可以查看推文的详细信息。我认为这可以通过更改子容器中的链接条件来实现。

标签： html reactjs react-router react-router-dom

【解决方案1】：

const [linkActivated, setLinkActivated] = useState(true)

const handleClick = e => {
 e.preventDefault()
 if(linkActivated)
 {
  setLinkActivated(false)
 } else {
  setActivated(true)
 }
}

<Link onClick={handleClick}>
<div>
activate Link

<div>
deactivate Link
</div>

activate Link
</div>
</Link>

这样做是有问题的，因为您永远不会前往该路线。因为每次点击都会激活和停用。

你可以这样做：

import React, {useState} from 'react'
import { useHistory } from "react-router-dom";
const MyComponent = () => {

const [linkActivated, setLinkActivated] = useState(true)
const history = useHistory();

const handleLinkClick = e => {
 e.preventDefault();
 if(linkActivated){
  // travel to link
 history.push("/somehwere");
 }

}
 return (
  <Link onClick={handleLinkClick}>My Link</Link>
  <button onClick={setLinkActivated(!linkActivated)}>
   {linkActivated ? 'Deactivate link' : 'Activate link'}
  </button> 
 )
}

由于很久没有触摸反应，如果下面的行不起作用，请尝试第二行

<Link onClick={handleLinkClick}>My Link</Link>

//if doens't work
<Link onClick={e => handleLinkClick(e)}>My Link</Link>

//or
<Link onClick={e => e.preventDefault();handleLinkClick }>My Link</Link>
//and remove the e parameter in method and aswell the e.preventDefault

【讨论】：

【解决方案2】：

您可以将 <Link> 包装在自定义 HOC 中并有条件地呈现它，如下所示：

const LinkHOC = (props) => {
    if (props.active) return (
        <Link to={props.to}>{props.text}</Link>
    );

    return (
        <span>{props.text></span>
    );
}

并像这样使用它：<LinkHOC to='/path' text='Redirect' active={true} /}

【讨论】：