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

【问题标题】：Is there a way to click div container wrapped react-router Link component?有没有办法单击 div 容器包装的 react-router 链接组件？
【发布时间】：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>

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

【问题讨论】：

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

【解决方案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;

【讨论】：

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