样式使NavLink在react中“不可点击”

Question

我正在尝试设计一个react-router-dom NavLink导航栏。我已经用了几种不同的方法，但在每一种情况下，无论我选择哪种方法，都会使NavLink变得“不可点击”--它将是一个样式很好的框，不会在点击时导航。以下是我的几种方法：

我尝试过的一种方法是制作带有点击测试的漂亮的css框。这是我想要使用的首选方法，因为它将允许我对鼠标悬停和其他伪元素进行样式设置。我尝试了以下方法，但没有成功。这两个glam元素只是样式化为div。我担心因为navlink被埋在一个div中，所以我尝试了为Navlink设置zIndex=999和为glam元素设置zIndex=1 (以及设置相对和绝对位置)，我还尝试为glam元素设置pointerEvents='none‘，这样您就可以’点击‘到导航链接。

设置样式：

const NavGlam = glamorous.div(
  {
    display: 'flex',
    flexDirection: 'row',
    position: 'relative',
    width:'100%',
    pointerEvents: 'none',
    listStyle: 'none',
    zIndex: '1',
    fontWeight: 'bolder',
    backgroundColor: 'purple',
  }
);

const NavGlamLi = glamorous.div(
  {
    display: 'flex',
    flex:'1',
    position:'relative',
    fontWeight: 'bolder',
    zIndex: '1',
    alignItems: 'center',
    verticalAlign: 'center',
    pointerEvents: 'none',
    textAlign: 'center',
    padding: '10px',
    margin: '10px'
  },
  ({clicked})=>({
    backgroundColor:clicked==='true'?`tomato`:`black`,
    color:clicked==='true'?`white`:`orange`
  })
);

渲染中的链接：

<NavGlam>
  <NavGlamLi clicked={this.props.clicked==='home'?`true`:`false`}>
     <NavLink to="/home" exact activeClassName="active">Home</NavLink>
  </NavGlam>
</NavGlam>

我尝试的另一种方法(作为一种技巧)是在类中创建一个函数，并以这种方式发送单击事件。这里的样式将只在navlink上，所以应该不会有任何点击问题，但同样，点击不起作用！

功能：

  navfunk(clicked){
    if (clicked==='true'){
      return(
        {
          display: 'flex',
          flex:'1',
          fontWeight: 'bolder',
          alignItems: 'center',
          verticalAlign: 'center',
          pointerEvents: 'none',
          textAlign: 'center',
          padding: '10px',
          margin: '10px',
          backgroundColor: 'tomato',
          color: 'white',
          textDecoration: 'none'
        }
      )
    }else{
      return(
        {
          display: 'flex',
          flex:'1',
          fontWeight: 'bolder',
          alignItems: 'center',
          verticalAlign: 'center',
          pointerEvents: 'none',
          textAlign: 'center',
          padding: '10px',
          margin: '10px',
          backgroundColor: 'black',
          color: 'orange',
          textDecoration: 'none'
        }
      )
    }
  }

和链接：

</NavGlam>
  <NavLink style={this.navfunk(this.props.clicked==='about'?`true`:`false`)}   to="/about" activeClassName="active">About</NavLink>
</NavGlam>

当我像这样将NavLinks放入一个样式化组件中时，它就能起作用了：

import styled from 'styled-components'

const Nav = styled.nav`
  display: flex;
  list-style: none;
  > :not(:first-child) {
    margin-left: 1rem;
  }
  a {
    font-weight: 300;
    color: ${palette('grayscale', 5)};
    font-size: 1.25rem;
    &.active {
      color: ${palette('grayscale', 5)};
    }
  }
`

  <Nav>
    <NavLink  to="/home" exact activeClassName="active">Home</NavLink>
  <Nav>

但是，样式化组件不能很好地支持伪元素(澄清:上面的&.active方法不起作用)，所以我不想使用它。有没有人可以告诉我为什么我的漂亮的css示例不能工作？

Answer 1

我遇到了与标准链接完全相同的问题

你的问题是这一行

const NavGlam = glamorous.div(

你不会想创建DIV的。Glamorous有几种方法，其中一些是针对特定元素的，例如

glamorous.h1 , glamorous.p , glamorous.input, glamorous.select ....

你想要做的是：

迷人的风格文件

import g from 'glamorous';
import { Link } from 'react-router-dom'; // or NavLink

export const StyledLink = g(Link)({
  textDecoration: 'none',
  .... other styles .....
});

，然后在组件中导入

import { StyledLink } from './style'; // your Glamorous style file

使用作为一个常规的链接，魅力与它的进口关心转换为常规的链接，给它的风格和做它的魔力

<StyledLink to="/contact">Contact page</StyledLink> // standard usage

希望这能有所帮助。祝你好运:)

Answer 2

您将对<NavGlamLi />元素应用pointer-events: none。你的<NavLink />是你的<NavGlamLi />的孩子。任何带有“pointer - events : none`”元素的子元素也不会接收指针事件。

您也不需要包括activeClassName="active"，因为这是<NavLink />的缺省设置

请查看本文以了解pointer-event的值。