React 将变量作为道具传递给组件

Question

If I have a component like <MyComponent isRed/> , is there a way to replace the isRed prop with a variable so that I can pass <MyComponent isBlue /> or <MyComponent isGreen /> conditionally with the same component?

If I did <MyComponent color={isColor}/> I would still need to determine what color is at MyComponent

I know I can achieve what I'm looking for by making a switch and return <MyComponent isRed/> , <MyComponent isBlue/> and <MyComponent isGreen/> depending on the case but that's a lot of redundant code so I was wondering if there's a way to do something like <MyComponent {isColor}/> ?

Answer 1

Maybe you could give some more context about what it is you're trying to do?
As I'm not entirely sure what your question is about, but I will try my best to answer.

If you need to actually set the color of something:
Let's say you're trying to set a background color of some element. You can just pass a string to the component to use it there:

let color = "#FF0000";
<YourComponent color={color} />

Using this approach you could directly use this string with the color value and use it to modify the color of your component:

const YourComponentReceivingTheColor = ({color}) => {
   return <div style={{ backgroundColor: color }} />
}