样式化组件渲染触发元素类型错误答案

【问题标题】：Styled Component rendering triggers Element type error样式化组件渲染触发元素类型错误
【发布时间】：2019-03-29 02:49:54
【问题描述】：

我刚刚安装了styled-components 库并开始使用它。

但是这个简单的例子：

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

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

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

以及渲染功能：

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>
    )
  )
}

触发此错误：Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

样式化组件返回$$typeof: Symbol(react.element)的对象

不知道怎么回事

【问题讨论】：

如何集成这个组件？我用 create-react-app 测试过，没问题。
是的，这里也一样......它正在工作。
@Deve 该组件基于结果图集成在另一个视图中，但即使我想单独渲染它，它也会抛出相同的错误。该项目尚未使用 creat-react-app 构建，而是使用 webpacker gem 构建
我们需要您的渲染，因为这里组件运行良好。问题应该来自其他地方。 ://
@Dave，感谢您抽出宝贵时间。我已经用实际的渲染功能更新了问题（即使使用单个样式组件的最愚蠢的渲染不起作用）

标签： reactjs styled-components

【解决方案1】：

您使用的是哪个版本的 React、React-Dom 和 Styled-Component？

确保 react 和 react-dom >=16.3.0 with styled-component >=4.0.0

在 styled-component v4 中使用新的 Context api 带来的重大变化需要 react >=16.3.0

请参阅https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4 上的第 2 点

【讨论】：

嘿，Christian，就是这样，我确实更新了react，但忘记将react-dom 升级到正确的版本。谢谢！