首頁  >  問答  >  主體

產生多個NextJS元件

我目前正在學習NextJS,我想建立一個展示我用它創建的多個專案的網站。

我有一個名為"Tag"的元件,它是一個帶有自訂文字的按鈕模板,我想透過props傳遞它:


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

然後,在我的Block元件中,我想根據透過props傳遞的陣列中的元素數量來產生相應數量的Tag元件:

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>
        </>
    )
}

然後,這個Block元件在主頁中被呼叫:

import Block from './components/Block'

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

問題是:沒有顯示任何標籤。

我認為問題與forEach方法有關,因為當我嘗試在沒有forEach方法的情況下產生單一標籤時,它可以正常工作。

問題在哪?

P粉513318114P粉513318114481 天前561

全部回覆(1)我來回復

  • 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]

    回覆
    0
  • 取消回覆