Переходы Гэтсби и Позы, не допускающие глобального состояния или контекста - PullRequest
Новая
       8

Переходы Гэтсби и Позы, не допускающие глобального состояния или контекста

0 голосов
/ 14 декабря 2018

Итак, у меня есть сайт, который построен с использованием gatsby и wordpress.Я добавил Pose для создания переходов страниц в содержимом главной страницы, сохраняя панель навигации фиксированной и исключенной из переходов.

У меня есть модальный компонент () на сайте, который я хочу отображать налюбую точку на сайте, нажав кнопку в основном, любую кнопку внутри основного содержимого, например, index.js или другие шаблоны страниц, на которых может быть включена кнопка «Открыть модальный режим».

У меня проблемы с передачей состояния, реквизит или контекст между этими компонентами.Я читал, что добавление атрибутов в компоненте PoseGroup будет передаваться как реквизит всем дочерним элементам, но я не вижу, чтобы это произошло.Я также попытался обернуть компонент DownloadForm в ModalContext.provider, но все еще, казалось, видел пустой контекст {} в index.js, когда я console.log (this)

Действительно застрял здесь и был весь день, так что любая помощь будетс благодарностью.Вот основные файлы, которые формируют структуру

gatsby-browser.js 

import { WrapPageElement } from './src/components/WrapPageElement'
export const wrapPageElement = WrapPageElement

layout.js 

import React from 'react'
const Layout = props => <div>{props.children}</div>
export default Layout

WrapPageElement.js 

import React, { Component } from 'react'
import posed, { PoseGroup } from 'react-pose'
import Helmet from 'react-helmet'
import Navbar from '../components/nav'
import DownloadForm from './utils/downloadForm'
import { Fade, DefaultPose } from './poses'

class Page extends Component {
  state = { displayDownloadForm: false }
  handleCloseForm = () => {
    this.setState({ displayDownloadForm: false })
  }
  handleShowForm = () => {
    this.setState({ displayDownloadForm: true })
  }
  render() {
    const { pose, transitionComponent } = this.props.element
    let transition = DefaultPose
    if (
      this.props.location.state &&
      this.props.location.state.transition === 'fade'
    ) {
      transition = Fade
    }
    const Pose = pose ? posed.div(pose) : transition

    const UsedTransition = transitionComponent || Pose
    return (
      <div>
        <Helmet />
        <DownloadForm
      {...this.state}
      onShowForm={this.handleShowForm}
      onCloseForm={this.handleCloseForm}
        />
        <Navbar data={this.props} />
    <div className="site-wrapper">
      <PoseGroup displayForm={this.state.displayDownloadForm} >
        <UsedTransition key={this.props.location.key}>
          <div className="section-wrapper">
            <div className="container-fluid">{this.props.element}</div>
          </div>
        </UsedTransition>
      </PoseGroup>
    </div>
  </div>
)
   }
}

export default Page

export const WrapPageElement = ({ element, props }) => {
  return <Page element={element} {...props} />
}

index.js 

    import React, { Component } from 'react'
    import Layout from '../components/Layout'
    import { graphql } from 'gatsby'
    import Helmet from 'react-helmet'

    class IndexPage extends Component {
      render() {
        return (
          <Layout>
            <Helmet />
            <section className="row">
                  <div
                    className="col-sm-6 col-sm-offset-3"
                    onClick={this.props.onShowForm}>clicky</div>

            </section>
          </Layout>
        )
      }
    }

    const Page = ({ data }) => {
      const { wordpressPage: page } = data
      return <IndexPage title={page.title} content={page.content} />
    }


    export default Page
    export const pageQuery = graphql`
      query { etc...
...