Question

因此，我有一个使用gatsby和wordpress构建的网站。我添加了Pose在主页内容上创建页面过渡，同时保持导航栏固定并从过渡中排除。

我在网站上有一个模式组件（），我希望能够通过单击main中的按钮，主要内容中的任何按钮（例如， index.js或其他可能带有“打开模式”按钮的页面模板。

我无法在这些组件之间传递状态，道具或上下文。我读到在PoseGroup组件上添加属性将作为道具传递给所有子项，但我看不到这种情况。我还尝试将DownloadForm组件包装在ModalContext.provider中，但是当我进行console.log（this）

时，似乎仍然在index.js上看到空的上下文{}。

真的被困在这里并且整日呆在这里，所以任何帮助将不胜感激。这是构成结构的主要文件

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...

Gatsby和Pose过渡不允许全局状态或上下文

0 个答案: