样式使 NavLink 在反应中“无法点击" [英] Styling makes NavLink 'unclickable' in react

问题描述

我正在尝试设置 react-router-dom NavLink 导航栏的样式.我已经采用了几种不同的方法，但在每种情况下，无论我选择哪种方式，都会使 NavLink 变得不可点击"——它将是一个样式精美的框，单击时不会导航.以下是我采用的几种方法:

I'm trying to style a react-router-dom NavLink navbar. I've gone about it a few different ways, but in every instance whatever way I will choose will make the NavLink 'unclickable' - it will be a nicely styled box that will not navigate on a click. Here are a couple ways I've gone about it:

我尝试过的一种方法是使用点击测试制作迷人的 css 框.这是我想要使用的首选方法，因为它允许我设置悬停和其他伪元素的样式.我尝试了以下但没有成功.这两个华丽的元素只是样式化的 div.我担心因为导航链接被埋在一个 div 中，所以它位于元素的下方"，所以我尝试为导航链接设置 zIndex=999，为华丽元素设置 zIndex=1(以及设置相对和绝对定位)，我还尝试为华丽元素设置 pointerEvents='none'，以便您可以点击"到导航链接.

One way I've tried is making glamorous css boxes with clicked tests. This is the preferred method that I want to work, because it will allow me to style hover and other pseudo-elements. I tried the following with no success. These two glam elements are just styled divs. I was worried that because the navlink was burried in a div it was 'underneath' the element, so I tried both setting the zIndex=999 for the Navlink and zIndex=1 for the glam elements (as well as setting relative and absolute positioning), and I also tried setting pointerEvents='none' for the glam elements so you could 'click through' to the navigation link.

样式:

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>

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

Another way that I tried to do it (as a bit of a hack), was to create a function in the class and send through the click events in that way. Here the styling would only be on navlink, so there should not have been any click through problems, but again, clicking doesn't work!

功能:

  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 放在这样的样式组件中时，它的作用是什么:

What DOES work is when I just put the NavLinks inside a styled-component like this:

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 示例不起作用?

But, styled-components do not have good support for pseudo-elements (CLARIFICATION: the &.active method doesn't work in the above), so I don't want to use this. Is there anyone who can tell me why my glamorous css examples do not work?

推荐答案

我遇到了标准链接的确切问题

I had the exact problem with standard Link

你的问题是这条线

const NavGlam = glamorous.div(

您不想创建 DIV.Glamourous 有几种方法，其中一些是特定于精确元素的，例如

You don't want to create DIV. Glamorous has several methods, some of them are specific for exact elements e.g.

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 的导入负责将其转换为普通链接，赋予其风格并发挥其魔力

And use as a regular Link, Glamorous with it's import takes care about transforming it to regular Link, giving it style and doing its magic

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

希望这会有所帮助.祝你好运:)

Hope this helps. Good luck :)

这篇关于样式使 NavLink 在反应中“无法点击"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！