样式化组件生成错误 "A valid React element (or null) must be returned. You may have"

Question

我的应用程序在本地呈现并抛出此错误"A valid React element (or null) must be returned. You may have"

我正在尝试使用样式组件。

我试过安装 styled-components@3.3.3

当我删除下面的索引代码时，它起作用了。

当我包含代码时，DOM 只是一个白屏，控制台会抛出错误。

import React from 'react'
import styled from 'styled-components'

const SectionGroup = styled.div`
    background: black;
    height: 720px;
`

const SectionLogo = styled.img``

const SectionTitleGroup = styled.div``

const SectionTitle = styled.h3``

const SectionText = styled.p``

const Section = props => {
    <SectionGroup image={props.image}>
        <SectionLogo src={props.logo} />
        <SectionTitleGroup>
            <SectionTitle>{props.title}</SectionTitle>
            <SectionText>{props.text}</SectionText>
        </SectionTitleGroup>
    </SectionGroup>
}

export default Section




//MY INDEX FILE HAS THIS

import Section from '../components/Section'

  <Section 
    image={require('../images/wallpaper2.jpg')}
    logo={require('../images/logo-react.png')}
    title="React for Designers"
    text="THIS IS SOME TEXT"
  />

我希望 DOM 呈现页面，但它没有。

"A valid React element (or null) must be returned. You may have"

Answer 1

这部分代码

const Section = props => {
    <SectionGroup image={props.image}>
        <SectionLogo src={props.logo} />
        <SectionTitleGroup>
            <SectionTitle>{props.title}</SectionTitle>
            <SectionText>{props.text}</SectionText>
        </SectionTitleGroup>
    </SectionGroup>
}

应该是

const Section = props => (
    <SectionGroup image={props.image}>
        <SectionLogo src={props.logo} />
        <SectionTitleGroup>
            <SectionTitle>{props.title}</SectionTitle>
            <SectionText>{props.text}</SectionText>
        </SectionTitleGroup>
    </SectionGroup>
)

您的代码没有 return 任何内容，因为您使用的是 { }

使用() => ( )或() => { return (...JSX) }

样式化组件生成错误 "A valid React element (or null) must be returned. You may have"

Styled-components generating error "A valid React element (or null) must be returned. You may have"

reactjs

gatsby

styled-components