如何通过this.props.children()而非this.props.children传递props？

我懂你想实现的需求：把布局里的props（比如data）通过调用children函数传递给页面组件，之前的写法无效是因为几个关键环节没配置对，下面给你具体的解决方案：

1. 修正布局组件的写法 #

首先，你的布局组件需要先拿到要传递的data，再把children当作函数调用并传入参数。这里用Gatsby推荐的函数式组件+hooks写法举例：

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

export default function ExampleLayout({ children }) {
  // 1. 先获取需要传递的数据，这里用useStaticQuery示例
  const data = useStaticQuery(graphql`
    query LayoutQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  // 2. 将children作为函数调用，传入data
  return <div className="layout-wrapper">{children(data)}</div>;
}

如果你的布局是通过页面查询（Page Query）获取data，写法如下：

import React from 'react';

export default function ExampleLayout({ children, data }) {
  // 直接使用props中的data（来自页面查询）
  return <div>{children(data)}</div>;
}

export const query = graphql`
  query LayoutPageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

2. 页面组件接收传递的Props #

接下来，你的页面组件必须是能接收参数的函数组件，这样才能拿到布局传过来的data：

// src/pages/about.js
import ExampleLayout from '../components/ExampleLayout';

// 这里的layoutData就是布局传递过来的data
export default function AboutPage(layoutData) {
  return (
    <div>
      <h1>About Page</h1>
      <p>从布局拿到的站点标题: {layoutData.site.siteMetadata.title}</p>
    </div>
  );
}

// 指定该页面使用的布局组件
AboutPage.Layout = ExampleLayout;

3. 全局应用布局（可选） #

如果想让所有页面都用这个布局，可以通过Gatsby的wrapPageElement API在gatsby-browser.js和gatsby-ssr.js中配置：

// gatsby-browser.js 和 gatsby-ssr.js 都需要添加这段代码
import ExampleLayout from './src/components/ExampleLayout';

export const wrapPageElement = ({ element, props }) => {
  // element是当前页面组件，把它包装成接收布局参数的函数
  return <ExampleLayout {...props}>{(layoutData) => element}</ExampleLayout>;
};

为什么之前的写法无效？ #

你之前的写法大概率踩了这些坑：

• 页面组件不是函数式组件，没法接收布局传递的参数
• 布局中的data没有正确获取（比如没通过查询或props传入）
• 没正确关联页面和布局（比如没设置Page.Layout或者全局布局配置）

按照上面的步骤调整后，就能实现你想要的“通过布局传递所有props给页面”的需求了。

内容的提问来源于stack exchange，提问作者Taylor Austin