样式化组件生成错误“必须返回有效的 React 元素（或 null）。您可能有”答案

【问题标题】：Styled-components generating error "A valid React element (or null) must be returned. You may have"样式化组件生成错误“必须返回有效的 React 元素（或 null）。您可能有”
【发布时间】：2020-01-12 23:35:04
【问题描述】：

我的应用正在本地渲染并抛出此错误“必须返回有效的 React 元素（或 null）。您可能有”

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

我已经尝试安装 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 呈现页面，但它没有。

“必须返回一个有效的 React 元素（或 null）。你可能有”

【问题讨论】：

标签： reactjs gatsby styled-components

【解决方案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 (...JSX) }

【讨论】：