В моем макете я использую StaticQuery, чтобы получить заголовок из моей конфигурации, как в версии для начинающих v2.Я бы хотел сделать это доступным и для children - в частности, для шаблона отображения сообщений в блоге.
Как мне это сделать?
Макет:
import React from "react";
import Helmet from "react-helmet";
import { StaticQuery, graphql } from "gatsby";
import Header from "./Header";
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
description
}
}
}
`}
render={data => {
const { title } = data.site.siteMetadata;
return (
<>
<Helmet
title={title}
>
<html lang="en" />
</Helmet>
<Header siteTitle={title} />
<main>{children}</main>
</>
);
}}
/>
);
export default Layout;
Шаблон сообщения:
import React from "react";
import Helmet from "react-helmet";
import { graphql } from "gatsby";
import Layout from "./Layout";
const Post = ({ title, data }) => {
const { markdownRemark: post } = data;
return (
<Layout>
<div className="blog-post-container">
<Helmet title={`${title} - ${post.frontmatter.title}`} />
<div className="blog-post">
<h1>{post.frontmatter.title}</h1>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</div>
</div>
</Layout>
);
};
export const pageQuery = graphql`
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`;
export default Post;
Из этого вопроса GitHub:
const childrenWithProps = React.Children.map(children, (child) =>
React.cloneElement(child, { title })
);
return <div>{childrenWithProps}</div>;
Однако, при попытке использовать props.title в моем шаблоне сообщения, я получаю неопределенный.