Question

在v1中，我曾经使用以下方式将道具传递给孩子：

children({ ...this.props, foo: bar })

但是在Gatsby v2中，子级不是函数： Uncaught TypeError: children is not a function

我看到子对象是对象数组，因此我尝试使用map向子对象数组中的每个对象添加道具（也尝试了forEach）：

const childrenWithProps = children.map(child => child.foo = bar)

但是我得到：Uncaught TypeError: Cannot add property foo, object is not extensible

v2的实现方式是什么？

Answer 1

我不确定Gatsby V2是否是正确的方法，但是您可以尝试使用render props。

我已经做了类似的事情：

在./src/components/Layout.js中：

import React from 'react';

const foo = 'bar';

export default ({ children }) => {
  return(
  <div>
    {children(foo)}
  </div>
)};

在./src/pages/index.js 中：

import React from "react"
import Layout from '../components/Layout';

export default (props) => {
  return (
    <Layout>
      {foo => (
        <div>
          {foo}
        </div>
      )}
    </Layout>
  )
}

Answer 2

您需要使用React.Children.map来映射一组React组件，并且需要使用React.cloneElement来修改道具：

React.Children.map(this.props.children, child => (
  React.cloneElement(child, {
    foo: "bar",
  })
))

就其价值而言，这与盖茨比无关，这只是React的工作方式。

如何将数据从布局组件传递到Gatsby V2中的子级？

2 个答案: