Question

自从实施了盖茨比V2以来，我开始了一个项目，我希望我的页面在任何情况下都具有自己的状态，并将值传递给布局组件。但是此刻，我无法到达那里的状态。只有孩子和位置。

这是页面：

import React, { Component} from 'react'
import Layout from '../components/layout'


class WorkPage extends Component {

  state = {
    intro : `WORK ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae augue id mi lobortis aliquet vitae et sem. 
            In fermentum ante sed turpis auctor finibus. Etiam sit amet leo eu arcu euismod ornare id pulvinar mauris. 
            Ut sagittis et urna et efficitur. Morbi porttitor lobortis accumsan. Curabitur hendrerit consequat dignissim.`, 
  }

  render(){
    const { intro } = this.state;
    return (
        <Layout intro={intro}>
          <h1>Work Page</h1>
          <p>Work content</p>
        </Layout>
     )
  }
}

export default WorkPage

这是布局：

class Layout extends Component {
  state = {
    status: null
  }

  constructor(props){
    super(props)
  }

render(){
   const {location, children, intro} = this.props
    return(
      <div>
        <div>{intro}</div>
        <div>{children}</div>
      </div>
      )
    }

}

export default Layout

当然，像上面的示例一样显示页面状态这不是我想要的，但这只是为了解释我要做什么。

Answer 1

我认为您可以将页面包装在布局中，并通过介绍作为布局的道具。

Layout intro={this.state.intro} 

 your page

/Layout

，然后在布局中使用{this .props.intro}。

在Gatsby中将页面状态传递给布局

1 个答案: