繁体   English   中英

JSX 中的 CSS 属性选择器与 TypeScript

[英]CSS attribute selectors in JSX with TypeScript

我可以在纯 HTML/CSS 中执行以下操作

<div color="red">
  red
</div>

<div color="yellow">
  yellow
</div>
div[color="red"] {
  color: red;
}

div[color="yellow"] {
  color: yellow;
}

但是,使用 React 和 TypeScript,我想做这样的事情:

const Colored = ({ color }: { color: "yellow" | "red" ) => (
    <div color={color}>
        { color }
    </div>
);

但是,我不能向div添加任意道具,! 所以我们可以做与上面完全相同的事情,而是

<Colored color="red" />
<Colored color="yellow" />

我怎么能做这样的事情? 另外,我应该这样做吗? 在 React 中有更好的方法吗?

在这种情况下,使用React.HTMLAttributes<HTMLDivElement>类型,您可以将其他属性传递给维护组件ColoredDIV

type IColoredProps =  { color: "yellow" | "red" } & React.HTMLAttributes<HTMLDivElement>
     
const Colored: FC<IColoredProp> = (props) => (
    <div {...props}>
        {props.color}
    </div>
);

现在颜色是强制性的,只能是“红色”或“黄色”,您可以传递普通div可以具有的 rest 属性。

<Colored style={{ fontSize: "25px" }} color="red"/>

我为您创建了一个codeSandBox示例:

  • 而不是<Colored text="red" />你应该使用<Colored color="red" />
①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM