Javascript 使用Gatsby Js单击锚点时反应切换活动类

我正在使用GatsbyJs，并试图实现一个活动类切换。我有一个简单的组件，由一个锚定标签组成，里面有一个跨度。我想更改一些css，方法是在单击锚点时切换锚点上的活动类。这是到目前为止我的代码，我也在使用样式化组件。我在下面的坏代码部分尝试了一些普通的js，但显然不起作用，因此代码也坏了

提前谢谢

风格

const Menu = styled.a`
  position: absolute;
  cursor: pointer; padding: 10px 35px 16px 0px;
  span, span:before, span:after{
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #000000;
    position: absolute;
    display: block;
    content: '';
    transition: all 200ms ease-in-out;
  }
  span:before{
    top: -10px; 
  }
  span:after{
    bottom: -10px; 
  }
  .active span{
    background-color: transparent;
  }
  .active span:before, .active span:after{
    top:0;
  }
  .active span:before{
    transform: rotate(45deg);
  }
  .active span:after{
    transform: rotate(-45deg);
  }
`

组成部分

const TemplateWrapper = ({ children }) => (
  <div>
    <Wrapper>
      <Menu id="nav-toggle" className="menu"><span></span></Menu>
      {children()}
    </Wrapper>       
  </div>
)

TemplateWrapper.propTypes = {
  children: PropTypes.func,
}

export default TemplateWrapper

这是呈现的html

<a class="menu sc-bwzfXH SqHLW" id="nav-toggle"><span></span></a>

---

您可以使用组件

状态

对此进行管理。 代码如下所示：

更新：将逻辑移动到

菜单

组件，因为将其放在那里更有意义。下面是工作示例

类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.menuClick=this.menuClick.bind（this）；
此.state={
菜单类：“”，
}
}
菜单单击（e）{
const menuClass=this.state.menuClass==“活动”：“；
this.setState（{menuClass}）；
}
render（）{
const{children，id}=this.props；
const menuClassName=`menu sc bwzfXH SqHLW nav toggle${this.state.menuClass}`；
返回（{children}）；
}
}
ReactDOM.render（测试链接，document.getElementById（'menu'））

菜单{
字体大小：粗体；
颜色：蓝色；
}
.主动{
颜色：红色；
}

---

好的，你可以看看这里。有几个答案说明了如何实现这一点，但是当您想要使用多个类时，事情会变得更加混乱

我喜欢这个包来处理基于道具或状态的多个类的样式设置

为了这个答案的清晰性，我简化了样式，并假设

菜单是一个全局类，您也希望应用它

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styled from 'styled-components';

const Wrapper = styled.div``;

const Menu = styled.a`
  span {
    color: green;
  }
  &.active span {
    color: blue;
  }
`;

class TemplateWrapper extends Component {
  state = {
    isActive: false
  };

  handleClick = () => {
    this.setState(state => ({ isActive: !state.isActive }));
  };

  render() {
    const menuClass = classNames({
      menu: true,
      active: this.state.isActive
    });

    return (
      <Wrapper>
        <Menu id="nav-toggle" className={menuClass} onClick={this.handleClick}>
          <span>Test</span>
        </Menu>
        {this.props.children}
      </Wrapper>
    );
  }
}

TemplateWrapper.propTypes = {
  children: PropTypes.node
};

TemplateWrapper.defaultProps = {
  children: null
};

export default TemplateWrapper;

渲染方法如下所示：

render() {
  return (
    <Wrapper>
      <Menu id="nav-toggle" className="menu" active={this.state.isActive} onClick={this.handleClick}>
        <span>Test</span>
      </Menu>
      {this.props.children}
    </Wrapper>
  );
}

render（）{
返回(
试验
{this.props.children}
);
}
你能把react代码发布到
#nav toggle
被渲染的地方吗？好的，我在上面添加了渲染的内容。此外，我还修复了菜单组件中缺少导航切换id的问题。但是，坏代码部分甚至不允许应用程序运行。如果我删除它，应用程序就会运行，一切都会呈现良好。我发现了问题所在，您需要在样式化组件中添加“&”before“.active span”。像&.active span…那么你得到的错误是什么？@m0rjjj当我包含断开的just时，该站点完全崩溃，因此css部分正在工作，但是我没有测试手动添加活动类，因此你可能部分正确。谢谢，我一回到我的PC就会尝试。如何将其与我当前的组件集成？我已经导出了我的模板包装器。我是否导出了两次？我很困惑。你应该修改
菜单
组件而不是
模板包装器
，以实现此功能。我不能以这种方式使用样式化的组件，我设置如下
const Menu=styled.a“color:blue”如果组件是样式化的，我将如何执行此操作？我得到以下错误
失败的属性类型：提供给
TemplateWrapper
的属性无效，应为ReactNode。`这很奇怪，如中所述，节点指的是“可以呈现的任何内容：数字、字符串、元素或数组（或片段）”包含这些类型的。”。因此，它是
儿童的正确道具。您提供了什么
儿童
？更具体地说，这里有什么嗯，我这里没有
东西。我试着自己添加一个
，但是我得到了同样的错误。我在上面的更新部分的回答中添加了我在代码中的内容。我使用的是盖茨比js，这是我的
layout/index.js
文件，所以我没有在任何地方使用。希望我们能解决这个问题。我唯一能想到的是，
子对象
应该在我的页面呈现的地方。我有一个
layout/index.js
文件，这是我上面的代码，然后我有一个
pages/index.js，pages/portfolio.js
，它们分别呈现在
children
部分中，只是想知道这是否与盖茨比js有关。
const Menu = styled.a`
  span {
    color: ${props => (props.active ? 'blue' : 'green')};
  }
`;

render() {
  return (
    <Wrapper>
      <Menu id="nav-toggle" className="menu" active={this.state.isActive} onClick={this.handleClick}>
        <span>Test</span>
      </Menu>
      {this.props.children}
    </Wrapper>
  );
}