生成多个NextJS组件

huangapple
go评论98阅读模式
英文:

Generating multiple NextJS Components

问题

I'm currently learning NextJS and I want to create a website that shows multiple projects that I've created with it.

I have a "Tag" component which is a sort of button template with custom text that I want to pass through props:

  1. export default function Tag({ val }) {
  2.     return (
  3.         <>
  4.             <p>{val}</p>
  5.         </>
  6.     )
  7. }

Then, in my Block component, I want to generate as many Tag components as there are in an array passed through props:

  1. import Tag from "./Tag";
  3. export default function Block({ tags, name }) {
  4.     return (
  5.         <>
  6.             <section>
  7.                 <div></div>
  8.                 <h2>{name}</h2>
  9.                 <div>
  10.                     {tags.forEach(tag => <Tag val={tag} />)}
  11.                 </div>
  12.             </section>
  13.         </>
  14.     )
  15. }

This Block component is then called in the main page:

  1. import Block from './components/Block';
  3. export default function Home() {
  4.   return (
  5.     <>
  6.       <Block tags={["Webflow", "UI Design"]} name="Projet 1" />
  7.     </>
  8.   )
  9. }

The problem is: no tags show up.

I think the problem is linked to the forEach method because when I try to generate a single tag without the forEach method, it works.

Can you figure out the problem?

Thanks, Lucas.

英文:

I'm currently learning NextJS and I want to create a website that shows multiple projects that I've created with it.

I have a "Tag" component which is a sort of button template with custom text that I want to pass through props :

  1. export default function Tag({val}) {
  2.     return(
  3.         &lt;&gt;
  4.             &lt;p&gt;{val}&lt;/p&gt;
  5.         &lt;/&gt;
  6.     )
  7. }

Then, in my Block component, I want to generate as many Tag components as there are in an array passed through props :

  1. import Tag from &quot;./Tag&quot;
  3. export default function Block({tags, name}) {
  4.     return(
  5.         &lt;&gt;
  6.             &lt;section&gt;
  7.                 &lt;div&gt;&lt;/div&gt;
  8.                 &lt;h2&gt;{name}&lt;/h2&gt;
  9.                 &lt;div&gt;
  10.                     {tags.forEach(tag =&gt; &lt;Tag val={tag} /&gt;)}
  11.                 &lt;/div&gt;
  12.             &lt;/section&gt;
  13.         &lt;/&gt;
  14.     )
  15. }

This Block component is then called in the main page :

  1. import Block from &#39;./components/Block&#39;
  3. export default function Home() {
  4.   return (
  5.     &lt;&gt;
  6.       &lt;Block tags={[&quot;Webflow&quot;, &quot;UI Design&quot;]} name=&quot;Projet 1&quot; /&gt;
  7.     &lt;/&gt;
  8.   )
  9. }

The problem is : no tags show up.

I think the problem is linked to the forEach method because when I try to generate a single tag without the forEach method, it works.

Can you figure out the problem ?

Thanks, Lucas.

答案1

得分: 1

你正在使用forEach，并且在此函数中没有返回任何内容。你可以使用array.map函数。

  1. {tags.map(tag => <Tag val={tag} />)}
  1. const tags = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  2. const result = tags.forEach(tag => tag)
  3. console.log(result) //undefined
  5. const mapResult = tags.map(tag => tag)
  6. console.log(mapResult) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
英文:

You are using forEach and nothing returns in this function. You can use array.map function.

  1. {tags.map(tag =&gt; &lt;Tag val={tag} /&gt;)}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月18日 06:17:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76708415.html
  • foreach
  • javascript
  • next.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定