Question

我开始使用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>

}

是否可以接收一个抛出颜色的道具props.myColor，如何使用Typescript Colors将myColor插入到组件BackGroundColor中。例如，蓝色应该是道具的蓝色。

如果我通过Colors.Blue，它会起作用，但是如何发送其他选项。

目标是接收颜色字符串抛出道具，并将颜色动态设置为背景成分。

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>
    }
}

听起来您已经有了正确的主意。您只需要定义道具的类型，然后该属性即可使用。而且，您可以继续根据需要向Colors枚举添加值。 myColor属性现在将仅接受该枚举中的值。

<ColorComponent myColor={Colors.Red} />

使用打字稿ENUM动态传递道具

1 个答案: