लेआउट से बच्चों को कस्टम प्रॉप्स पास करने का प्रयास करते समय, मुझे निम्नलिखित प्राप्त हो रहे हैं: TypeError: props.children is not a function

लेआउट (कार्यात्मक घटक सारांश)

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

export default (props) => {
    const {site} = useStaticQuery(
        graphql`
            {
                site {
                    siteMetadata {
                        title
                    }
                }
            }
        `
    )
    const globals = {title: site.siteMetadata.title}

    return (
        <>
            {props.children({...props, ...globals})}
        </>
    )
}

बच्चा (एक कार्यात्मक घटक भी)

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

export default () => {
    return (
        <Layout>
            <main>
                <h1>*site title will go here</h1>
            </main>
        </Layout>
    )
}
4
Ryan Prentiss 30 अक्टूबर 2019, 09:25

1 उत्तर

सबसे बढ़िया उत्तर

फ़ंक्शन पैटर्न प्रस्तुत करें

रेंडर फ़ंक्शन पैटर्न का उपयोग करने के लिए आपको अपने चाइल्ड कंपोनेंट को संशोधित करना होगा:

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

export default () => {
    return (
        <Layout>
            {props => (<main>
                <h1>{props.title}</h1>
            </main>)}
        </Layout>
    )
}  
6
Deval Chaudhari 30 अक्टूबर 2019, 07:35