接收props.children不是函数 [英] Receiving props.children is not a function

问题描述

当尝试将自定义道具从布局传递给子项时，我收到以下消息: TypeError:props.children不是函数

When attempting to pass custom props from layout to children, I am receiving the following: 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>
    )
}

推荐答案

渲染功能模式

要使用渲染功能模式，您需要将子组件修改为

To use render function pattern you need to modified your child component as

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

export default () => {
    return (
        <Layout>
            {props => (<main>
                <h1>{props.title}</h1>
            </main>)}
        </Layout>
    )
}  

这篇关于接收props.children不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！