reactjs - 在《 Gatsby 》中将 Prop 从布局传递给 child

Question

如何将 props 从 Gatsby 布局传递给子组件(例如 Header 组件)？

import React from "react";

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

我找到的资源使用以下格式:

{ props.children({ ...props, foo: true }) }
{ this.props.children({...this.props, updateLayoutFunction }) }

但是由于没有 props，只有 child ，所以我无法让它工作。我尝试了这个，但它也不起作用:

{ children({ foo: true }) }

在所有情况下，我都会收到此错误:TypeError: undefined is not an object (evaluating 'history.listen')

https://github.com/gatsbyjs/gatsby/issues/3412#event-1446894145 https://github.com/gatsbyjs/gatsby/issues/2112

Answer 1

但是 Prop 是有的，只是你没有把它们传给 child 而已。

在布局文件中，而不是:

export default ({ children }) // ... etc

做

export default (props) {
  const myOwnProperties = { foo: true };

  return (
    {props.children({ ...props, ...myOwnProperties })}
  );
}

你看， Prop 会自动传递，直到您添加自己的 Prop 。