如何根据另一个组件的状态更改css属性

Question

我正在构建一个基于react的gatsby网页，我需要我的导航组件将他的粘性位置更改为相对或自动，每次我打开图库component..but的模式时，我都不知道如何处理和解决这个问题。nav组件属于布局组件，它是图片库的父component...Here，涉及的组件如下：

nav组成部分：

import React, { Component } from 'react'
import { Location } from '@reach/router'
import { Link } from 'gatsby'
import { Menu, X } from 'react-feather'
import Logo from './Logo'

import './Nav.css'

export class Navigation extends Component {
  state = {
    active: false,
    activeSubNav: false,
    currentPath: false
  }

  componentDidMount = () =>
    this.setState({ currentPath: this.props.location.pathname })

  handleMenuToggle = () => this.setState({ active: !this.state.active })

  // Only close nav if it is open
  handleLinkClick = () => this.state.active && this.handleMenuToggle()

  toggleSubNav = subNav =>
    this.setState({
      activeSubNav: this.state.activeSubNav === subNav ? false : subNav
    })

  render() {
    const { active } = this.state,
    { subNav } = this.props,
      NavLink = ({ to, className, children, ...props }) => (
        <Link
          to={to}
          className={`NavLink ${
            to === this.state.currentPath ? 'active' : ''
          } ${className}`}
          onClick={this.handleLinkClick}
          {...props}
        >
          {children}
        </Link>
      )

    return (
      <nav className={`Nav ${active ? 'Nav-active' : ''}`}>

        <div className="Nav--Container container">
             <Link to="/" onClick={this.handleLinkClick}>
                <div style={{ width: `40px`, margin:`0 20px`}}>
                   <Logo />
                </div>
             </Link>

          <div className="Nav--Links">
          <NavLink to="/">Home</NavLink>
          <NavLink to="/contact/">Contacto</NavLink>

            <div className={`Nav--Group ${this.state.activeSubNav === 'about' ? 'active' : '' }`} > 

                 <span className={`NavLink Nav--GroupParent ${
                   this.props.location.pathname.includes('about') ||
                   this.props.location.pathname.includes('team') ||
                   this.props.location.pathname.includes('news') 
                   ? 'active'
                    : ''
                 }`} 
                       onClick={() => this.toggleSubNav('about')}
                 >
                     Nosotros
                 </span>
                 <div className="Nav--GroupLinks">
                    {subNav.map( (link, index)=> (
                        <NavLink 
                        to={link.link} 
                        key={'posts-subnav-link-' + index}
                        className="Nav--GroupLink">{link.name}</NavLink>
                    ))}
                 </div>

            </div>

          </div>

          <button
            className="Button-blank Nav--MenuButton"
            onClick={this.handleMenuToggle}
          >
            {active ? <X /> : <Menu />}
          </button>

        </div>

      </nav>
    )
  }
}

export default ({ subNav }) => (
  <Location>{route => <Navigation subNav={subNav} {...route} />}</Location>
)

默认位置属性在nav.css文件中设置为粘滞--我希望删除该属性，并根据模式库状态(打开或关闭)动态更改它。

这是我的画廊组件：

import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";

const PhotoGallery = ({photos}) => {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

   return(
     <div>
         <Gallery photos={photos} onClick={openLightbox} />
            <ModalGateway>
                {viewerIsOpen ? (
                   <Modal onClose={closeLightbox}>
                   <Carousel
                    currentIndex={currentImage}
                    views={photos.map(x => ({
                    ...x,
                    srcset: x.srcSet,
                    caption: x.title
                  }))}
            />
          </Modal>
        ) : null}
      </ModalGateway>
     </div>
   )
}

export default PhotoGallery

问题是，当模态打开时，导航仍然很粘稠，不允许我访问模态控件，比如close和expand...and，我需要更改它。

Answer 1

有几种方法可以解决这个问题。

1. 老学校类名切换 将支持传递到反映状态的子组件。在子类上，使用该支柱有条件地呈现一个或多个表示所需表示的类。
2. style 通过指定样式 这与#1类似，但消除了抽象层。与其组装类列表，不如组装要作为对象应用的CSS样式。 const Component = ({ someState }) => 某些文本
3. 使用CSS in JS库。 上述方法的缺点是，您最终会复制页面上元素的每个实例的样式。CSS库通过将样式提取到自动生成的类中并将类应用到组件中来解决这一问题。我更喜欢情感，但还有其他的。 使用情感，您可以接受父级的className道具，它覆盖子程序设置的默认值。这种控制反转功能非常强大，并且解决了早期CSS在JS方法中的许多缺点。 const ParentComponent = () => { const someState = useState(false)返回 } const ChildComponent = ({ className }) => 在上面的示例中，className是通过情感分配的，它使用生成的类名分配，这个类名基于传递给ChildComponent的css道具在ParentComponent中。当div为false (默认)时，结果将是一个蓝色边框和蓝色文本的false。当someState切换到true时，边框和文本将是红色的。这是因为通过className传入的样式将覆盖情感上通过css直接分配的样式。