如何在 React JS 应用程序中的 Gatsby Markdown 页面之间传递数据

Question

所以我的应用程序结构如下，我有一个降价页面：

template: myTemplate
slug: 'temp/myTemplate1'
id: ''
locationName: ''
address1: ''
city: ''
state: ''
zip: ''
title: My Title
featuredImage: 'imageSample1.png'
subtitle: 'A subtitle'
meta:
  description: >-
    Page Description
  title: 'My Template'
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non tellus orci ac auctor augue. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Ut faucibus pulvinar elementum integer. Egestas maecenas pharetra convallis posuere morbi leo. Dignissim convallis aenean et tortor at. Quisque id diam vel quam. Proin libero nunc consequat interdum varius. Feugiat nisl pretium fusce id.

此 md 文件使用的模板来自 jsx 文件，如下所示：

export const myTemplateTemplate = ({ data }) => {
  const { frontmatter, body } = data.page;
  const {
    title,
    subtitle,
    featuredImage,
    locationName,
    address,
    city,
    state,
    zip,
  } = frontmatter;

  return (
    <Layout
      title={title}
      subtitle={subtitle}
      featuredImage={featuredImage}
    >
      <MainContainer>
        <TitleContainer>
          <H2>{title}</H2>
        </TitleContainer>
        <InfoContainer>
          {featuredImage && (
            <FeatureImageContainer>
              <Image
                fileName={featuredImage}
              />
            </FeatureImageContainer>
          )}
          <MainInfoContainer>
            {locationName}
            {address}
            {city}
            {zip}
          
          </MainInfoContainer>
        </InfoContainer>
        <MainBodyContainer>
          <Content source={body} />
        </MainBodyContainer>
      </MainContainer>
    </Layout>
  );
};

export default EventsPageTemplate;

export const pageQuery = graphql`
  query EventsPage($id: String!) {
    page: mdx(id: { eq: $id }) {
      body
      frontmatter {
        slug
        title
        subtitle
        featuredImage
        locationName
        address
        city
        state
        zip
      }
    }
  }
`;

现在我有大约十几个页面使用相同的模板，但城市地址、州、邮编、特色图片略有不同，它们是不同的。我想向该模板添加一个按钮，以便它可以转到另一个降价页面，并且该页面应该是动态的，它将从当前页面获取并呈现城市、地址、州、邮政编码、特色图像和正文并显示它.

那么我该如何实现呢？如何在两个 md 文件之间共享数据？

Answer 1

Ok let me more clearer. I have one template for events now I have various events markdown files So each event markdown file has a different title, subtitle, address, city, state etc, that's the only difference. Now I want a event registration page where user can click on a button on one of the events page and navigate to this event registration page and now this event registration page should dynamically show the data such as title, subtitle, address, city, state etc depending on from which event page its coming from. Now how can I pass that data to event registration?

根据评论区提供的新数据，我会改写答案。

要继续使用事件模板并将数据传递到您的 /registration 页面，您可以使用 <Link> 的状态，这是一种使用 [= 将数据传递到目标页面的方法14=] 的状态，但需要明确的是，这不是一种将数据传递到降价文件（或它们之间）的方式，而是一种将数据传递到基于降价数据（采购）构建的页面的方式.

export const myTemplateTemplate = ({ data }) => {
  const { frontmatter, body } = data.page;
  const {
    title,
    subtitle,
    featuredImage,
    locationName,
    address,
    city,
    state,
    zip,
  } = frontmatter;

  return (
    <Layout
      title={title}
      subtitle={subtitle}
      featuredImage={featuredImage}
    >
      <MainContainer>
        <TitleContainer>
          <H2>{title}</H2>
        </TitleContainer>
        <InfoContainer>
          {featuredImage && (
            <FeatureImageContainer>
              <Image
                fileName={featuredImage}
              />
            </FeatureImageContainer>
          )}
          <MainInfoContainer>
            {locationName}
            {address}
            {city}
            {zip}
          
          </MainInfoContainer>
        </InfoContainer>
        <MainBodyContainer>
          <Content source={body} />
        <Link state={{ 
            title: title
            subtitle: subtitle
            address:address
            city: ity
            state: state
            zip: zip
            }} to="/registration">Register
        </Link>
        </MainBodyContainer>
      </MainContainer>
    </Layout>
  );
};

export default EventsPageTemplate;

export const pageQuery = graphql`
  query EventsPage($id: String!) {
    page: mdx(id: { eq: $id }) {
      body
      frontmatter {
        slug
        title
        subtitle
        featuredImage
        locationName
        address
        city
        state
        zip
      }
    }
  }
`;

现在，在您的目标页面上。

const Registration= ({ location }) => {

  return <div>I'm a registration page {location.state.title && location.state.title}</div>
}

您可以在 props.location.state 中访问 <Link> 的状态，但如果您尝试访问未提供的数据，请确保添加强制控制以避免代码破坏。

如何在 React JS 应用程序中的 Gatsby Markdown 页面之间传递数据

How to pass data between Gatsby Markdown pages in a React JS app

markdown

reactjs

react-router

graphql

gatsby