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

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

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

问题

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

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

这样,在每个图标组件中,你都将传递相同的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:

import AppleIcon from &quot;../assets/fruitIcons/AppleIcon&quot;;
import BananaIcon from &quot;../assets/fruitIcons/BananaIcon&quot;;
import KiwiIcon from &quot;../assets/fruitIcons/KiwiIcon&quot;;

export default function Test() {
  const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;

  return (
    &lt;&gt;
      &lt;AppleIcon className={className} /&gt;
&lt;KiwiIcon className={className} /&gt;
&lt;BananaIcon className={className} /&gt;
&lt;/&gt;

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

//necessary icon imports

export const fruitsArray = [
  {
    id: &quot;fruit&quot;,
    title: &quot;Apple&quot;,
    value: &quot;apple&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;AppleIcon /&gt;,
  },
  {
    id: &quot;fruit&quot;,
    title: &quot;Banana&quot;,
    value: &quot;banana&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;BananaIcon /&gt;,
  },
  {
    id: &quot;fruit&quot;,
    title: &quot;Kiwi&quot;,
    value: &quot;kiwi&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;KiwiIcon /&gt;,
  }
]

And then how its called/rendered:

import {fruitsArray} from &quot;../arrays/fruitsArray

export default function Fruits() {

const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;

return (
    &lt;&gt;
      &lt;ul&gt;
        {fruitsArray.map((icon) =&gt; (
          &lt;li key={icon}&gt;{icon.icon}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

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:

{
    id: "fruit",
    title: "Kiwi",
    value: "kiwi",
    type: "checkbox",
    render: (className) => <KiwiIcon className={className} />,
}

Then

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

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

{
    id: &quot;fruit&quot;,
    title: &quot;Kiwi&quot;,
    value: &quot;kiwi&quot;,
    type: &quot;checkbox&quot;,
    render: (className) =&gt; &lt;KiwiIcon className={className} /&gt;,
}

Then

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

答案2

得分: 0

You could transform fruitsArray into a function:

export const fruitsArrayGenerator = (className) => [
  {
    id: "fruit",
    title: "苹果",
    value: "apple",
    type: "checkbox",
    icon: <AppleIcon className={className} />,
  },
  {
    id: "fruit",
    title: "香蕉",
    value: "banana",
    type: "checkbox",
    icon: <BananaIcon />,
  },
  {
    id: "fruit",
    title: "猕猴桃",
    value: "kiwi",
    type: "checkbox",
    icon: <KiwiIcon />,
  }
]

Then:

import { fruitsArrayGenerator } from "../arrays/fruitsArray";

export default function Fruits() {

  const className = "w-10 h-10 fill-current text-orange-700";

  return (
    <>
      <ul>
        {fruitsArrayGenerator(className).map((icon) => (
          <li key={icon}>{icon.icon}</li>
        ))}
      </ul>
    </>
  );
}

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

英文:

You could transform fruitsArray into a function

export const fruitsArrayGenerator = (className) =&gt; [
  {
    id: &quot;fruit&quot;,
    title: &quot;Apple&quot;,
    value: &quot;apple&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;AppleIcon className={className} /&gt;,
  },
  {
    id: &quot;fruit&quot;,
    title: &quot;Banana&quot;,
    value: &quot;banana&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;BananaIcon /&gt;,
  },
  {
    id: &quot;fruit&quot;,
    title: &quot;Kiwi&quot;,
    value: &quot;kiwi&quot;,
    type: &quot;checkbox&quot;,
    icon: &lt;KiwiIcon /&gt;,
  }
]

then

import {fruitsArray} from &quot;../arrays/fruitsArray

export default function Fruits() {

const className = &quot;w-10 h-10 fill-current text-orange-700&quot;;

return (
    &lt;&gt;
      &lt;ul&gt;
        {fruitsArrayGenerator(className).map((icon) =&gt; (
          &lt;li key={icon}&gt;{icon.icon}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

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

发表评论

匿名网友

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

确定