我在我的nextjs应用程序中使用SVG作为组件,但它抛出以下错误消息:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Emoji`.
EmojiSection.js
import { useDocument } from "../../hooks/useDocument"
import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"
import Emoji from "./Emoji"
const EmojiSection = () => {
const router = useRouter()
const { id: docID } = router.query
const { document: reactions } = useDocument(`solutions/${docID}/reactions`, "emojis")
return (
<div>
{DEFAULT_EMOJI_OPTIONS.map((emoji) => (
<Emoji key={emoji.label} reactions={reactions} emoji={emoji} />
))}
</div>
)
}
export default EmojiSection
Emoji.js:
const Emoji = ({ reactions, emoji }) => {
console.log(emoji)
return (
<>
<span>
<emoji.emoji className="w-16 h-16" />
</span>
</>
)
}
export default Emoji
emoji.js
import ClappingHand from "../assets/emojiIcons/clappingHand.svg"
import Coin from "../assets/emojiIcons/coin.svg"
import Heart from "../assets/emojiIcons/heart.svg"
import Medal from "../assets/emojiIcons/medal.svg"
const DEFAULT_EMOJI_OPTIONS = [
{
emoji: Rocket,
label: "rocket",
slug: "rocket",
},
{
emoji: Coin,
label: "coin",
slug: "coin",
},
{
emoji: ClappingHand,
label: "clapping hand",
slug: "clapping-hand",
},
{
emoji: Medal,
label: "medal",
slug: "medal",
}
]
export { DEFAULT_EMOJI_OPTIONS }
Emoji.js
文件中的console.log(emoji)
,显示如下:
有人能帮我一下吗?
1条答案
按热度按时间rbl8hiat1#
您不能将JSX属性传递给原生
svg
图标。请尝试创建React组件,并将这些原生htmlsvg
标记转换为React组件,然后将props
转发给它们。因此,不要从svg文件导入
ClappingHand
,而是在icons
文件夹中创建一个jsx
文件ClappingHand.jsx
,并添加以下代码。现在,从上面的组件中导入
ClappingHand
而不是svg文件,其他内容保持不变。对所有图标做同样的操作。然后它应该会工作。如果你有任何进一步的疑问,请随时询问:-)