英文:
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 "../assets/fruitIcons/AppleIcon";
import BananaIcon from "../assets/fruitIcons/BananaIcon";
import KiwiIcon from "../assets/fruitIcons/KiwiIcon";
export default function Test() {
const className = "w-10 h-10 fill-current text-orange-700";
return (
<>
<AppleIcon className={className} />
<KiwiIcon className={className} />
<BananaIcon className={className} />
</>
And this is how i'm trying to call it. First the array:
//necessary icon imports
export const fruitsArray = [
{
id: "fruit",
title: "Apple",
value: "apple",
type: "checkbox",
icon: <AppleIcon />,
},
{
id: "fruit",
title: "Banana",
value: "banana",
type: "checkbox",
icon: <BananaIcon />,
},
{
id: "fruit",
title: "Kiwi",
value: "kiwi",
type: "checkbox",
icon: <KiwiIcon />,
}
]
And then how its called/rendered:
import {fruitsArray} from "../arrays/fruitsArray
export default function Fruits() {
const className = "w-10 h-10 fill-current text-orange-700";
return (
<>
<ul>
{fruitsArray.map((icon) => (
<li key={icon}>{icon.icon}</li>
))}
</ul>
</>
);
}
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: "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>
答案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) => [
{
id: "fruit",
title: "Apple",
value: "apple",
type: "checkbox",
icon: <AppleIcon className={className} />,
},
{
id: "fruit",
title: "Banana",
value: "banana",
type: "checkbox",
icon: <BananaIcon />,
},
{
id: "fruit",
title: "Kiwi",
value: "kiwi",
type: "checkbox",
icon: <KiwiIcon />,
}
]
then
import {fruitsArray} 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>
</>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论