有沒有辦法點擊 div 容器包裹的 react-router 鏈接組件？

Question

我在我的反應項目中遇到問題，我試圖在下面描述這個問題。 我用 react-router 鏈接包裝了所有組件。 在代碼的某些部分，我需要這個 Link 進行導航，但我需要禁用 Link 組件進行導航，並在其他地方使用帶有 onClick 操作的內部 div。

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

我希望我解釋了我的痛苦。 等待您的答復。

Answer 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;