Generieren Sie mehrere NextJS-Komponenten

Question

Ich lerne gerade NextJS und möchte eine Website erstellen, die die zahlreichen Projekte präsentiert, die ich damit erstellt habe.

Ich habe eine Komponente namens „Tag“, bei der es sich um eine Schaltflächenvorlage mit benutzerdefiniertem Text handelt, und ich möchte sie über Requisiten übergeben:

export default function Tag({val}) {
    return(
        <>
            <p>{val}</p>
        </>
    )
}

Dann möchte ich in meiner Block-Komponente eine entsprechende Anzahl von Tag-Komponenten generieren, basierend auf der Anzahl der Elemente im Array, die über Requisiten übergeben werden:

import Tag from "./Tag"

export default function Block({tags, name}) {
    return(
        <>
            <section>
                <div></div>
                <h2>{name}</h2>
                <div>
                    {tags.forEach(tag => <Tag val={tag} />)}
                </div>
            </section>
        </>
    )
}

Dann wird diese Blockkomponente auf der Startseite aufgerufen:

import Block from './components/Block'

export default function Home() {
  return (
    <>
      <Block tags={["Webflow", "UI Design"]} name="Projet 1" />
    </>
  )
}

Das Problem ist: Es werden keine Etiketten angezeigt.

Ich denke, das Problem hängt mit der forEach-Methode zusammen, denn wenn ich versuche, ein einzelnes Etikett ohne die forEach-Methode zu generieren, funktioniert es einwandfrei.

Was ist das Problem?

Answer 1

你使用了forEach方法，但在这个函数中没有返回任何内容。你可以数组的map方法。

{tags.map(tag => <Tag val={tag} />)}

const tags = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const result = tags.forEach(tag => tag)
console.log(result) //undefined

const mapResult = tags.map(tag => tag)
console.log(mapResult) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]