样式化组件渲染触发元素类型错误 [英] Styled Component rendering triggers Element type error
问题描述
我刚刚安装了 styled-components
库并开始使用它.
但是这个简单的例子:
从 'react' 导入 React从样式组件"导入样式const Div = styled.div`背景:红色;`const AlertCard = () =>(<Div>Hello World</Div>)导出默认警报卡
和渲染函数:
render() {const { fetchingAlerts, alerts } = this.props返回 (获取警报 ?<装载机/>:<div><AlertFormContainer/><div>{alerts.length === 0 ?<EmptyAlerts/>:<div>{alerts.map(alert => (<AlertCard text="我的文字"/>))}
}
))}
触发此错误:错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象.
样式化组件返回一个$$typeof的对象:Symbol(react.element)
我不知道出了什么问题
您使用的是哪个版本的 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
I just installed the styled-components
library and started playing with it.
However this simple example:
import React from 'react'
import styled from 'styled-components'
const Div = styled.div`background: red;`
const AlertCard = () => (
<Div>Hello World</Div>
)
export default AlertCard
And the render function:
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>
)
)
}
triggers this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
The styled component returns an object of $$typeof: Symbol(react.element)
I don't know what goes wrong
Which version of React, React-Dom and Styled-Component are you using?
Make sure that react and react-dom are >=16.3.0 with styled-component >=4.0.0
The breaking change brought upong the use of the new Context api in styled-component v4 requires react >=16.3.0
see point #2 on https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4
这篇关于样式化组件渲染触发元素类型错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!