javascript - 使用 typescript ENUM 动态传递 props

Question

我开始学习 typescript ，使用 React，因此尝试创建场景来练习。

export enum Colors {
  Blue = "#0000FF",
  Red= "#FF0000",
  Green = "#00FF00",
}

 export const ColorComponent React.FC<props> = ((props): JSX.Element => {

// props will receive dynamically one of the options (Blue, Red or Green)

return (

        <div className="container">
            <BackGroundColor Color={} />
       </div>

}

是否可以接收颜色抛出 Prop ，props.myColor，如何使用 Typescript Colors.Blue 将 myColor 插入到组件 BackGroundColor 中，例如，蓝色应该来自 Prop 。

如果我传递 Colors.Blue 它可以工作，但如何发送其他选项。

目标是接收颜色字符串抛出 Prop 并动态地将颜色设置到背景组件中。

Answer 1

interface Props {
   myColor: Colors
}

export const ColorComponent React.FC<props> = ((props: Props): JSX.Element => {
    return (
        <div className="container">
            <BackGroundColor Color={props.myColor} />
        </div>
    }
}

听起来你已经有了正确的想法。你只需要定义 props 的类型，然后该属性就可用了。您可以根据需要继续向 Colors 枚举添加值。 myColor 属性现在只接受来自该枚举的值。

<ColorComponent myColor={Colors.Red} />