0

编辑： 这个Github 存储库上有一个演示。

我需要根据帖子/页面（其 slug）更改我博客的主要布局 hero-image。
每个帖子都有一个英雄形象，设置在 frontmatter 信息中。

我尝试了所有方法，但是：
1. 要么它只显示相同的图像（我的上一篇文章）——如果我markdownRemark不重复回忆就会发生这种情况。
2. 或者它告诉我在迭代之后需要一个关键道具（我已经设置）allMarkdownRemark。

这是我最后一次尝试。我通过 GraphQl 获取数据，然后设置了一个条件（如果它是主页，它会显示我的主要英雄图像，否则它应该显示位于单个帖子的 frontmatter 信息中的图像）：

[...]
{location.pathname === '/' 
  ? (<Img fluid={data.file.childImageSharp.fluid} />) 
  : (({allMarkdownRemark}) => ( 
    allMarkdownRemark.edges.map(({node}) => ( 
      <Img 
        key={node.frontmatter.slug}
        fluid={node.frontmatter.hero.childImageSharp.fluid} /> 
    )
  ))
)}
[...]

这是整个布局组件：

import React from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import { Spring } from 'react-spring/renderprops';
import styled from "styled-components";
import { StaticQuery, graphql } from "gatsby";
import Img from 'gatsby-image';


import Header from "./header";
import Archive from "./archive";
import "./layout.css";

const MainLayout = styled.main`...`;

const Layout = ({ children, location }) => (
<StaticQuery
  query={graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
          description
        }
      }
      file(relativePath: {regex: "/my-main-img/"}) {
        childImageSharp {
          fluid (maxWidth: 1900, quality: 90) {
            ...GatsbyImageSharpFluid_tracedSVG
          } 
        }
      }
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              slug
              hero {
                childImageSharp{
                  fluid(maxWidth: 800, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
      markdownRemark {
        frontmatter {
          hero {
            childImageSharp {
              fluid (maxWidth: 1900, quality: 90) {
                ...GatsbyImageSharpFluid_tracedSVG
              }
            }
          }
        }
      } 
    }
  `}
  render={data => (
    <>
      <Helmet [...]>
      [...]
      </Helmet>
      <Header siteTitle={data.site.siteMetadata.title} />
      <Spring 
        from={{ height: location.pathname === '/' ? 150 : 500 }} 
        to={{ height: location.pathname === '/' ? 500 : 150 }}>
        {({ height }) => 
          <div style={{ overflow: 'hidden', height }}>
            {location.pathname === '/'
              ? (<Img fluid={data.file.childImageSharp.fluid} />)
              : (({allMarkdownRemark}) => ( 
                    allMarkdownRemark.edges.map(({node}) => 
                      (<Img
                        key={node.frontmatter.slug}
                        fluid={node.frontmatter.hero.childImageSharp.fluid}/>)
                    )
                ))
            }
          </div>
        }
      </Spring>
      <MainLayout>
        <div>{children}</div>
        <Archive />
      </MainLayout>
    </>
    )}
  />
);

Layout.propTypes = {
children: PropTypes.node.isRequired
};

export default Layout;

我遵循了每个指南，但仍然没有得到缺少的东西。我是新来的反应，而不是 javascript 方面的专家，如果这是一个菜鸟问题，我很抱歉。

提前感谢您的帮助。

4

1 回答 1

0 
  <div style={{ overflow: 'hidden', height }}>
    {location.pathname === '/'
      ? (<Img fluid={data.file.childImageSharp.fluid} />)
>     : (({allMarkdownRemark}) => ( 
>           allMarkdownRemark.edges.map(({node}) => 
>             (<Img
>               key={node.frontmatter.slug}
>               fluid={node.frontmatter.hero.childImageSharp.fluid}/>)
>           )
>       ))
    }
  </div>

也许这就是问题所在——在上面的三元组中，你传入了一个用于 false 条件的函数，即使它看起来上面没有渲染道具组件？也许它应该只是

{ location.pathname === '/' 
    ? (<Img ... />)
    : (data.allMarkdownRemark.edges.map(({ node }) => ...))
}
于 2019-02-24T17:04:10.923 回答