NextJs错误的解决方案是什么：“标题元素接收到一个数组，该数组有多个元素作为子元素.”

cwxwcias 于 2023-03-29 发布在其他

关注(0)|答案(2)|浏览(124)

创建一个组件来 Package 每个页面，并希望为每个页面接收子元素和标题，这会引发错误。“标题元素接收到一个数组，其中有多个元素作为子元素。”

import Head from "next/head";

interface IProps {
  children: JSX.Element;
  title?: string;
  restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
  const {
    children,
    title = "Generated by create next app",
    ...restProps
  } = props;

  return (
    <>
      <Head>
        <title>CV-stack - {title}</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>{children}</main>
    </>
  );
}

next.js

来源：https://stackoverflow.com/questions/75875037/what-is-the-solution-to-nextjs-error-title-element-received-an-array-with-more

2条答案

按热度按时间

q8l4jmvw1#

我在this link上看到了一个解决方案。
下面是工作的示例代码：

import Head from "next/head";

interface IProps {
  children: JSX.Element;
  title?: string;
  restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
  const {
    children,
    title = "Generated by create next app",
    ...restProps
  } = props;

  return (
    <>
      <Head>
        <title>{`CV-stack - ${title}`}</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>{children}</main>
    </>
  );
}

注意，title现在是一个带有{CV-stack - ${title}}的节点，而不是CV-stack - {title}

赞(0）回复(0）举报 2023-03-29

o2g1uqev2#

你需要提供一个像这样的对象

<title>{`CV-stack - ${title}`}</title>

由于在此评论中解释的原因（react dom字符串渲染）https://github.com/vercel/next.js/discussions/38256

赞(0）回复(0）举报 2023-03-29

我来回答

NextJs错误的解决方案是什么：“标题元素接收到一个数组，该数组有多个元素作为子元素.”

2条答案

相关问题

热门标签

最新问答