有没有办法单击 div 容器包装的 react-router 链接组件？

Posted 2023-03-05

【中文标题】有没有办法单击 div 容器包装的 react-router 链接组件？

【英文标题】：Is there a way to click div container wrapped react-router Link component?

【发布时间】：2021-10-20 20:03:14

【问题描述】：

我的 react 项目有问题，我试图在下面描述这个问题。我用 react-router Link 包装了所有组件。在代码的某些部分，我需要此链接进行导航，但我需要禁用链接组件进行导航并在其他地方使用带有 onClick 操作的内部 div。

<Link to=`/somewhere`>
  <div onClick=this.handleClick>
    ....some other div container...
  <div>
<Link>

我希望我解释了我的痛苦。等待您的答复。

【参考方案1】：

将Link内部的JSX提取到自己的组件中并有条件地渲染

// InnerComponent.jsx

const InnerComponent = (isLink, to) => 
   
   const handleClick = () => 
     // your onClick handler
   

   const InnerJsx = (
     <div onClick= isLink ? () =>  : handleClick  >
       ...Your JSX...
     </div>
   )
   
   return (
     isLink ? <Link to=to>InnerJsx</Link> : InnerJsx
   )


export default InnerComponent;

【讨论】：

感谢您的回答，我的代码正在运行。