Я создаю веб-страницу с помощью gatsby, которая основана на реагировании, и мне нужно, чтобы компонент nav изменял его закрепленное положение на относительное или автоматическое, каждый раз, когда открываю модальный компонент галереи … но я не знаю, как подойти и решить проблему. Компонент nav принадлежит компоненту компоновки, который является родительским компонентом Gallery … Вот эти компоненты:

навигационная составляющая:

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 = () ={amp}gt; this.setState({ currentPath: this.props.location.pathname }) handleMenuToggle = () ={amp}gt; this.setState({ active: !this.state.active }) // Only close nav if it is open handleLinkClick = () ={amp}gt; this.state.active {amp}amp;{amp}amp; this.handleMenuToggle() toggleSubNav = subNav ={amp}gt; this.setState({ activeSubNav: this.state.activeSubNav === subNav ? false : subNav }) render() { const { active } = this.state, { subNav } = this.props, NavLink = ({ to, className, children, ...props }) ={amp}gt; ( {amp}lt;Link to={to} className={`NavLink ${ to === this.state.currentPath ? 'active' : '' } ${className}`} onClick={this.handleLinkClick} {...props} {amp}gt; {children} {amp}lt;/Link{amp}gt; ) return ( {amp}lt;nav className={`Nav ${active ? 'Nav-active' : ''}`}{amp}gt; {amp}lt;div className="Nav--Container container"{amp}gt; {amp}lt;Link to="/" onClick={this.handleLinkClick}{amp}gt; {amp}lt;div style={{ width: `40px`, margin:`0 20px`}}{amp}gt; {amp}lt;Logo /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;div className="Nav--Links"{amp}gt; {amp}lt;NavLink to="/"{amp}gt;Home{amp}lt;/NavLink{amp}gt; {amp}lt;NavLink to="/contact/"{amp}gt;Contacto{amp}lt;/NavLink{amp}gt; {amp}lt;div className={`Nav--Group ${this.state.activeSubNav === 'about' ? 'active' : '' }`} {amp}gt; {amp}lt;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={() ={amp}gt; this.toggleSubNav('about')} {amp}gt; Nosotros {amp}lt;/span{amp}gt; {amp}lt;div className="Nav--GroupLinks"{amp}gt; {subNav.map( (link, index)={amp}gt; ( {amp}lt;NavLink to={link.link} key={'posts-subnav-link-'   index} className="Nav--GroupLink"{amp}gt;{link.name}{amp}lt;/NavLink{amp}gt; ))} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button className="Button-blank Nav--MenuButton" onClick={this.handleMenuToggle} {amp}gt; {active ? {amp}lt;X /{amp}gt; : {amp}lt;Menu /{amp}gt;} {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/nav{amp}gt; ) } } export default ({ subNav }) ={amp}gt; ( {amp}lt;Location{amp}gt;{route ={amp}gt; {amp}lt;Navigation subNav={subNav} {...route} /{amp}gt;}{amp}lt;/Location{amp}gt; ) 

в файле nav.css для свойства position по умолчанию установлено значение sticky. Я хочу удалить его и изменить его динамически в зависимости от состояния модальной галереи: открыть или закрыть.

это мой компонент галереи:

 import React, { useState, useCallback } from "react"; import Gallery from "react-photo-gallery"; import Carousel, { Modal, ModalGateway } from "react-images"; const PhotoGallery = ({photos}) ={amp}gt; { const [currentImage, setCurrentImage] = useState(0); const [viewerIsOpen, setViewerIsOpen] = useState(false); const openLightbox = useCallback((event, { photo, index }) ={amp}gt; { setCurrentImage(index); setViewerIsOpen(true); }, []); const closeLightbox = () ={amp}gt; { setCurrentImage(0); setViewerIsOpen(false); }; return( {amp}lt;div{amp}gt; {amp}lt;Gallery photos={photos} onClick={openLightbox} /{amp}gt; {amp}lt;ModalGateway{amp}gt; {viewerIsOpen ? ( {amp}lt;Modal onClose={closeLightbox}{amp}gt; {amp}lt;Carousel currentIndex={currentImage} views={photos.map(x ={amp}gt; ({ ...x, srcset: x.srcSet, caption: x.title }))} /{amp}gt; {amp}lt;/Modal{amp}gt; ) : null} {amp}lt;/ModalGateway{amp}gt; {amp}lt;/div{amp}gt; ) } export default PhotoGallery 

проблема в том, что когда модальный режим открыт, навигация все еще остается липкой и не позволяет мне получить доступ к модальным элементам управления, таким как закрыть и развернуть … и мне нужно это изменить.

Есть несколько подходов к этому.

  1. Преобразование старой школы

    Передайте реквизит дочернему компоненту, который отражает состояние. На ребенке используйте эту опору для условного рендеринга одного или нескольких классов, которые представляют желаемое представление.

  2. Назначать стили с помощью style

    Это похоже на # 1, но устраняет уровень абстракции. Вместо того, чтобы собирать список классов, вы просто собираете стили CSS, которые хотите применить в качестве объекта.

     const Component = ({ someState }) ={amp}gt; {amp}lt;div style={someState ? { border: "5px solid red" } : { color: "#999" }}{amp}gt; Some Text {amp}lt;/div{amp}gt; 
  3. Используйте библиотеку CSS-in-JS

    Недостатком вышеуказанного подхода является то, что вы создаете дублирующие стили для каждого экземпляра вашего элемента на странице. Библиотеки CSS-in-JS решают эту проблему путем извлечения ваших стилей в автоматически сгенерированный класс и применения этого класса к вашему компоненту. Я предпочитаю эмоции , но есть и другие.

    Используя Emotion, вы можете принять реквизит className от родителя, который переопределяет значения по умолчанию, установленные дочерним элементом. Такое инвертирование контроля действительно мощно и решает многие недостатки ранних подходов CSS-in-JS.

     const ParentComponent = () ={amp}gt; { const [someState] = useState(false) return {amp}lt;ChildComponent css={{ color: someState ? "blue" : "red" }} /{amp}gt; } const ChildComponent = ({ className }) ={amp}gt; {amp}lt;div css={{ color: "#000", border: "4px solid currentColor" }} className={className} {amp}gt; Some Text {amp}lt;/div{amp}gt; 

    В приведенном выше примере className назначается Emotion с использованием сгенерированного имени класса, назначенного на основе ChildComponent css переданного ChildComponent внутри ChildComponent . Результатом этого будет div с синей рамкой и синим текстом, когда someState имеет значение false (по умолчанию). Когда someState переключен в true , рамка и текст будут красными. Это связано с тем, что стили, передаваемые через className , переопределяют стили, назначенные напрямую через css в Emotion.