错误：元素类型无效：应为字符串(对于内置组件)(NextJs)

bkhjykvo 于 2023-02-15 发布在其他

关注(0)|答案(1)|浏览(132)

我在我的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)，显示如下：

有人能帮我一下吗？

next.js

来源：https://stackoverflow.com/questions/75456151/error-element-type-is-invalid-expected-a-string-for-built-in-components-nex

1条答案

按热度按时间

rbl8hiat1#

您不能将JSX属性传递给原生svg图标。请尝试创建React组件，并将这些原生html svg标记转换为React组件，然后将props转发给它们。
因此，不要从svg文件导入ClappingHand，而是在icons文件夹中创建一个jsx文件ClappingHand.jsx，并添加以下代码。

import React from "react";

export const ClappingHand = ({
  ...props
}) => {
  // Make sure you convert native svg code to JSX. 
  // - e.g the class in native svg should be changed to className.

  // paste your svg code for respective icons below
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={18}
      height={18}
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 262"

      // forward the props to the svg tag
      {...props} 
    >
      <path
        fill="#4285F4"
        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.204 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
      />
      <path
        fill="#34A853"
        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
      />
      <path
        fill="#FBBC05"
        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
      />
      <path
        fill="#EB4335"
        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
      />
    </svg>
  );
};

现在，从上面的组件中导入ClappingHand而不是svg文件，其他内容保持不变。
对所有图标做同样的操作。然后它应该会工作。如果你有任何进一步的疑问，请随时询问：-）

赞(0）回复(0）举报 2023-02-15

我来回答

错误：元素类型无效：应为字符串(对于内置组件)(NextJs)

1条答案

相关问题

热门标签

最新问答