reactjs - 样式使 NavLink 'unclickable' 发生 react

Question

我正在尝试设计一个react-router-dom NavLink 导航栏。我已经采用了几种不同的方法，但在每种情况下，无论我选择什么方式，都会使 NavLink “不可点击” - 它将是一个样式精美的框，不会通过单击进行导航。以下是我采取的几种方法:

我尝试过的一种方法是通过点击测试制作迷人的 CSS 框。这是我想要使用的首选方法，因为它允许我设置悬停和其他伪元素的样式。我尝试了以下方法但没有成功。这两个华丽的元素只是样式化的 div。我担心因为 navlink 被埋在 div 中，所以它位于元素的“下方”，所以我尝试为 Navlink 设置 zIndex=999 ，为 glam 元素设置 zIndex=1 (以及设置相对和绝对定位) ，我还尝试为华丽元素设置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>

我尝试的另一种方法(有点黑客)是在类中创建一个函数并以这种方式发送点击事件。这里的样式仅在导航链接上，因此不应该有任何点击问题，但同样，点击不起作用!

功能:

  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

作为常规链接使用，Glamorous 的导入会负责将其转换为常规链接，赋予其风格并发挥其魔力

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

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