Поддержание / доступ к глобальному состоянию на сайте Гэтсби - PullRequest
Новая
       8

Поддержание / доступ к глобальному состоянию на сайте Гэтсби

0 голосов
/ 18 ноября 2018

В настоящее время я пытаюсь реализовать довольно простую функцию на сайте Gatsby JS, который был создан кем-то другим, и столкнулся со следующей проблемой:

Страница в настоящее время затемняет фон при открытии модального окна, но вместо этого я хотел бы иметь размытие фона. Для достижения более темного фона, компонент для модального объекта включает в себя div с фиксированной позицией, который заполняет окно, css которого выглядит следующим образом: 

.background_fader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
}

Я пытался использовать filter: blur(20px) вместо background-color, но безрезультатно. Похоже, что даже когда я изменяю z-index элемента div, я не могу размыть фон, а скорее должен добавить свойство filter в оболочку страницы, т.е. намного выше в иерархии .

У меня есть некоторый опыт реагирования и почти нет опыта с Гэтсби, поэтому, пожалуйста, извините, если этот вопрос прост / коренится в фундаментальном заблуждении. До сих пор я имел дело со страницами, которые использовали Redux в качестве централизованного состояния, и гораздо более широкий вопрос, который возник при реализации размытия, был следующим:

Как добавить состояние к корневому компоненту страницы Gatsby, чтобы передать соответствующие аспекты дочерним компонентам и таким образом перерисовать страницу?

Проведя некоторые исследования, я пришел к выводу, что должна быть возможность использовать функцию wrapRootElement из gatsby-browser.js для определения состояния в корне приложения, но у меня возникли проблемы реализуя это, потому что единственные реквизиты, к которым у меня есть доступ к «корневому» компоненту, сгенерированному из layouts / index.js, - это данные, полученные из Graphql.

В настоящее время файл layout / index.js выглядит следующим образом: 

import React from 'react';
import graphql from 'graphql';
import Helmet from 'react-helmet';
import classNames from 'classnames';

// import 'bootstrap/dist/css/bootstrap.min.css';
import './reset.css';
import '../components/styleguide/index.less';
import Feedback from '../components/feedback';
import Navbar from '../components/Nav';
import Footer from '../components/footer';
import Subscribe from '../components/Subscribe';
import './index.less';

export default ({
  children, location, data: {
    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },
    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },
    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }
  }
}) => {
  const wrapperClasses = classNames(
    'page-wrapper',
    {
      'page-wrapper--custom': location.pathname.split('/')[1]
    },
    `page-wrapper--${location.pathname.split('/')[1]}`
  );
  return (
    <div className={wrapperClasses}>
      <Helmet>
        <html lang="uk" />
      </Helmet>
      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />
      <Feedback
        location={location}
        email={homepageSettings.contactFormEmail}
        title={homepageSettings.contactFormTitle}
      />
      {children()}
      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />
      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />
    </div>
  );
};

export const pageQuery = // very long query which appears to be sound

Итак, возвращаясь к моему вопросу:

Как я могу динамически добавить или удалить имя класса к wrapperClasses на основе состояния, которое я передаю компоненту <Feedback, и где я могу создать это состояние для повторной загрузки всей страницы, когда оно изменения.

Заранее спасибо, ребята.

...