Reactjs 样式化组件呈现触发元素类型错误

我刚刚安装了

样式化组件

库并开始使用它

然而，这个简单的例子：

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

const Div = styled.div`background: red;`

const AlertCard = () => (
  <Div>Hello World</Div>
)
export default AlertCard

从“React”导入React
从“样式化组件”导入样式化
const Div=styled.Div`背景：红色`
常数警报卡=（）=>(
你好，世界
)
导出默认警报卡

和渲染功能：

render() {
  const { fetchingAlerts, alerts } = this.props

  return (
    fetchingAlerts ? 
      <Loader /> :
      <div>
        <AlertFormContainer />
        <div>
          {alerts.length === 0 ?
            <EmptyAlerts /> :
            <div>
              {alerts.map(alert => (
                <AlertCard text="My text " />
              ))}
            </div>
          }
        </div>
      </div>
    )
  )
}

render（）{
const{fetchingAlerts，alerts}=this.props
返回(
去拿行李？
:
{alerts.length==0？
:
{alerts.map（alerts=>(
))}
}
)
)
}

触发此错误：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

样式化组件返回一个对象

$$typeof:Symbol（react.element）

---

我不知道出了什么问题

您使用的是哪个版本的React、React Dom和样式化组件

确保react和react dom>=16.3.0，且已设置样式的组件>=4.0.0

在样式化组件v4中使用新的上下文api所带来的突破性变化要求react>=16.3.0

---

请参见

上的第2点，如何集成此组件？我用CreateReact应用程序进行了测试，我没有问题。是的，这里也一样。。。它正在工作。@Deve此组件集成在另一个基于结果映射的视图中，但即使我想单独渲染它，它也会抛出相同的错误。该项目尚未使用CreatReact应用程序构建，但webpacker gem需要您的渲染，因为在这里，组件运行良好。问题应该来自其他地方/@戴夫，谢谢你抽出时间。我已经用实际的渲染函数更新了这个问题（即使使用单一样式组件的最愚蠢的渲染不起作用）嘿，就是这样，我确实更新了

react

，但忘了将

react dom

升级到正确的版本。谢谢