如何在 Next.js 中使用 .map() 元标记答案

【问题标题】：How to .map() meta tag in Next.js如何在 Next.js 中使用 .map() 元标记
【发布时间】：2020-06-12 08:19:48
【问题描述】：

我正在尝试 .map 元的内容，但映射是复制整个元标记的多次。这是我的代码。

{general.head.articleAuthor.en.map(( ) => (
          <meta property="article:author" content={general.head.articleAuthor.en} />
        ))}

export const general = {
head: {
articleAuthor: {
en: ['name1', 'name2']}
}
}

我希望输出应该是这样的<meta property="article:author" content="name1,name2"/>

但我的代码映射为 <meta property="article:author" content="name1,name2"/> <meta property="article:author" content="name1,name2"/>

现在，如果我添加 name3，那么它会将整个元数据映射 3 次。我不希望元标记复制。我需要映射的内容。

【问题讨论】：

“但映射是复制整个元标记的多次” 这似乎是你告诉它要做的事情。你想让它做什么呢？
我只需要name1、name2来映射。不是多次映射整个元标记。

标签： javascript reactjs next.js array.prototype.map

【解决方案1】：

...但是映射是复制整个元标记的多次...

我可以想到两种解释。但在你写的评论中：

我只需要 name1、name2 来映射。不是多次映射整个元标记。

听起来你想要一个包含所有作者的 single meta 标记。为此，请使用join 而不是map：

<meta property="article:author" content={general.head.articleAuthor.en.join(", ")} />
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^

这会给你

<meta property="article:author" content="name1, name2"} />

或类似的。字符串是分隔符。因此，如果您不希望逗号后有空格，只需将其从 ", " 更改为 ","。

我阅读问题的另一种方式，我现在认为这是不正确的，但可能对其他人有用，您希望为每个作者提供一个meta。为此，请使用传递给map 的值，而不是在content 中使用general.head.articleAuthor.en：

{general.head.articleAuthor.en.map(author => (
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^
  <meta property="article:author" content={author} />
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^
))}

【讨论】：

【解决方案2】：

在迭代中不要全部使用当前的obj：

{general.head.articleAuthor.en.map((obj) => (
      <meta property="article:author" content={obj} />
 ))}

我希望输出应该是这样的<meta property="article:author" content="name1,name2"/>

由于en 被定义为一个数组，因此您可以使用.join() 来获取一个元标记中的所有值。它不需要映射。

{ <meta property="article:author" content={general.head.articleAuthor.en.join(',')} /> }

【讨论】：