将props传递给数组中的组件应该如何实现？

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

How Do I pass props into a component that's in an array?

问题

你可以尝试在fruitsArray.map的循环中为每个图标组件传递className作为属性。这样应该可以将Tailwind CSS的类传递给这些组件。例如：

  1. {fruitsArray.map((icon) => (
  2.   <li key={icon.id}>
  3.     {React.cloneElement(icon.icon, { className: className })}
  4.   </li>
  5. ))}

这样，在每个图标组件中，你都将传递相同的className属性，使其具有所需的样式。

请注意，你可能需要导入React，以便使用React.cloneElement方法。希望这能帮助你解决问题。

英文:

I'm trying to render a component from an array that is mapped. The actual rendering of the component is fine, the problem is that i want to pass props into it but i'm not sure how. I'm using Tailwind CSS so the props that i'm passing in are the classes for components.

This is how i would normally render it if its not being mapped:

  1. import AppleIcon from &quot;../assets/fruitIcons/AppleIcon&quot;;
  2. import BananaIcon from &quot;../assets/fruitIcons/BananaIcon&quot;;
  3. import KiwiIcon from &quot;../assets/fruitIcons/KiwiIcon&quot;;
  5. export default function Test() {
  6.   const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;
  8.   return (
  9.     &lt;&gt;
  10.       &lt;AppleIcon className={className} /&gt;
  11. &lt;KiwiIcon className={className} /&gt;
  12. &lt;BananaIcon className={className} /&gt;
  13. &lt;/&gt;

And this is how i'm trying to call it. First the array:

  1. //necessary icon imports
  3. export const fruitsArray = [
  4.   {
  5.     id: &quot;fruit&quot;,
  6.     title: &quot;Apple&quot;,
  7.     value: &quot;apple&quot;,
  8.     type: &quot;checkbox&quot;,
  9.     icon: &lt;AppleIcon /&gt;,
  10.   },
  11.   {
  12.     id: &quot;fruit&quot;,
  13.     title: &quot;Banana&quot;,
  14.     value: &quot;banana&quot;,
  15.     type: &quot;checkbox&quot;,
  16.     icon: &lt;BananaIcon /&gt;,
  17.   },
  18.   {
  19.     id: &quot;fruit&quot;,
  20.     title: &quot;Kiwi&quot;,
  21.     value: &quot;kiwi&quot;,
  22.     type: &quot;checkbox&quot;,
  23.     icon: &lt;KiwiIcon /&gt;,
  24.   }
  25. ]

And then how its called/rendered:

  1. import {fruitsArray} from &quot;../arrays/fruitsArray
  3. export default function Fruits() {
  5. const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;
  7. return (
  8.     &lt;&gt;
  9.       &lt;ul&gt;
  10.         {fruitsArray.map((icon) =&gt; (
  11.           &lt;li key={icon}&gt;{icon.icon}&lt;/li&gt;
  12.         ))}
  13.       &lt;/ul&gt;
  14.     &lt;/&gt;
  15.   );
  16. }

This last block of code renders without css, i just don't know how to pass props from the page/component that's running the map.

Please let me know if i'm going about this the right way.

答案1

得分: 1

I suggest changing each object's icon prop to a render function:

  1. {
  2.     id: "fruit",
  3.     title: "Kiwi",
  4.     value: "kiwi",
  5.     type: "checkbox",
  6.     render: (className) => <KiwiIcon className={className} />,
  7. }

Then

  1. <ul>
  2.     {fruitsArray.map((icon) => (
  3.       <li key={icon.title}>{icon.render(className)}</li>
  4.     ))}
  5. </ul>
英文:

I suggest changing each object's icon prop to a render function:

  1. {
  2.     id: &quot;fruit&quot;,
  3.     title: &quot;Kiwi&quot;,
  4.     value: &quot;kiwi&quot;,
  5.     type: &quot;checkbox&quot;,
  6.     render: (className) =&gt; &lt;KiwiIcon className={className} /&gt;,
  7. }

Then

  1. &lt;ul&gt;
  2.     {fruitsArray.map((icon) =&gt; (
  3.       &lt;li key={icon.title}&gt;{icon.render(className)}&lt;/li&gt;
  4.     ))}
  5. &lt;/ul&gt;

答案2

得分: 0

You could transform fruitsArray into a function:

  1. export const fruitsArrayGenerator = (className) => [
  2.   {
  3.     id: "fruit",
  4.     title: "苹果",
  5.     value: "apple",
  6.     type: "checkbox",
  7.     icon: <AppleIcon className={className} />,
  8.   },
  9.   {
  10.     id: "fruit",
  11.     title: "香蕉",
  12.     value: "banana",
  13.     type: "checkbox",
  14.     icon: <BananaIcon />,
  15.   },
  16.   {
  17.     id: "fruit",
  18.     title: "猕猴桃",
  19.     value: "kiwi",
  20.     type: "checkbox",
  21.     icon: <KiwiIcon />,
  22.   }
  23. ]

Then:

  1. import { fruitsArrayGenerator } from "../arrays/fruitsArray";
  3. export default function Fruits() {
  5.   const className = "w-10 h-10 fill-current text-orange-700";
  7.   return (
  8.     <>
  9.       <ul>
  10.         {fruitsArrayGenerator(className).map((icon) => (
  11.           <li key={icon}>{icon.icon}</li>
  12.         ))}
  13.       </ul>
  14.     </>
  15.   );
  16. }

Note: I've provided the translation for the fruit names, but the code itself remains unchanged.

英文:

You could transform fruitsArray into a function

  1. export const fruitsArrayGenerator = (className) =&gt; [
  2.   {
  3.     id: &quot;fruit&quot;,
  4.     title: &quot;Apple&quot;,
  5.     value: &quot;apple&quot;,
  6.     type: &quot;checkbox&quot;,
  7.     icon: &lt;AppleIcon className={className} /&gt;,
  8.   },
  9.   {
  10.     id: &quot;fruit&quot;,
  11.     title: &quot;Banana&quot;,
  12.     value: &quot;banana&quot;,
  13.     type: &quot;checkbox&quot;,
  14.     icon: &lt;BananaIcon /&gt;,
  15.   },
  16.   {
  17.     id: &quot;fruit&quot;,
  18.     title: &quot;Kiwi&quot;,
  19.     value: &quot;kiwi&quot;,
  20.     type: &quot;checkbox&quot;,
  21.     icon: &lt;KiwiIcon /&gt;,
  22.   }
  23. ]

then

  1. import {fruitsArray} from &quot;../arrays/fruitsArray
  3. export default function Fruits() {
  5. const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;
  7. return (
  8.     &lt;&gt;
  9.       &lt;ul&gt;
  10.         {fruitsArrayGenerator(className).map((icon) =&gt; (
  11.           &lt;li key={icon}&gt;{icon.icon}&lt;/li&gt;
  12.         ))}
  13.       &lt;/ul&gt;
  14.     &lt;/&gt;
  15.   );
  16. }

huangapple
  • 本文由 发表于 2023年5月14日 22:36:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76248027.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

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

确定