Heim  >  Fragen und Antworten  >  Hauptteil

Generieren Sie mehrere NextJS-Komponenten

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?

P粉513318114P粉513318114482 Tage vor564

Antworte allen(1)Ich werde antworten

  • P粉512729862

    P粉5127298622023-07-20 09:52:35

    你使用了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]

    Antwort
    0
  • StornierenAntwort