Как передать данные из компонента Layout детям в Gatsby V2?
В v1 я передавал детям реквизиты примерно так:
children({ ...this.props, foo: bar })
Но в Gatsby v2 дети не являются функцией:
Uncaught TypeError: children is not a function
Я видел, что дети - это массив объектов, поэтому я попытался добавить опору к каждому объекту в массиве детей, используя карту (также пробовал forEach):
const childrenWithProps = children.map(child => child.foo = bar)
Но получаю: Uncaught TypeError: Cannot add property foo, object is not extensible
Как это сделать в версии 2?
Ответы 2
Я не уверен, что это правильный способ в отношении Gatsby V2, но вы можете попробовать использовать рендерить реквизит.
Я сделал что-то вроде этого:
в ./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>
)
}
Вам нужно использовать React.Children.map, чтобы сопоставить массив компонентов React, и вам нужно использовать React.cloneElement для изменения свойств:
React.Children.map(this.props.children, child => (
React.cloneElement(child, {
foo: "bar",
})
))
Как бы то ни было, это не связано с Гэтсби, это просто способ работы React.