reactjs - 样式化组件渲染触发元素类型错误

Question

我刚刚安装了 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>
    )
  )
}

触发此错误:错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:对象。

样式化组件返回一个 $$typeof: Symbol(react.element)

的对象

我不知道出了什么问题

Answer 1

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

确保react和react-dom>=16.3.0且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 点