生成多个NextJS组件

Question

我目前正在学习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方法的情况下生成单个标签时，它可以正常工作。

问题在哪？

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]