时间戳

首页 > 解决方案 > 在 Gatsby 站点中维护/访问全局状态

reactjs - 在 Gatsby 站点中维护/访问全局状态

问题描述

我目前正在尝试在 Gatsby JS 驱动的站点中实现一个相当简单的功能，该站点是由其他人构建的，并且面临以下问题：

当打开模式时，页面当前会使背景变暗，但我希望背景模糊。为了实现更暗的背景，modal的组件包括一个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-indexdiv 的值，我也无法模糊背景，而是必须filter 在页面的包装处添加属性，即在层次结构中更高。

我有一些反应经验，而盖茨比几乎没有，所以如果这个问题很简单/源于一个基本的误解，请原谅。到目前为止，我处理的是使用 Redux 作为集中状态的页面，而在实现模糊时出现的更广泛的问题是：

如何向 Gatsby 页面的根组件添加状态，以便将相关方面向下传递给子组件，从而重新呈现页面？

在做了一些研究之后，我得出的结论是，应该可以使用wrapRootElementgatsby-browser.js 中的函数来在应用程序的根目录定义一个状态，但是我在实现这个时遇到了麻烦，因为唯一的我似乎能够在从 layouts/index.js 生成的“根”组件中访问的道具是从 Graphql 检索到的数据。

目前 layouts/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组件的状态动态添加或删除类名，以及当它更改时我将在哪里实例化此状态以重新加载整个页面。

先谢谢各位了。

标签： reactjsjsxgatsby

解决方案

推荐阅读