reactjs JSX中带有TypeScript的CSS属性选择器

kknvjkwl 于 2023-02-04 发布在 React

关注(0)|答案(2)|浏览(148)

我可以在纯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!!中添加临时 prop ，所以我们可以做与上面完全相同的操作，但是

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

我怎么能做这样的事情呢？另外，我甚至应该这样做吗？在React中有没有更好的方法来做这件事？

reactjs

来源：https://stackoverflow.com/questions/75314249/css-attribute-selectors-in-jsx-with-typescript

2条答案

按热度按时间

bvuwiixz1#

在本例中，使用类型React.HTMLAttributes<HTMLDivElement>，您可以将附加属性传递给DIV，以维护组件Colored。

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

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

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

赞(0）回复(0）举报 2023-02-04

nvbavucw2#

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

您应该使用<Colored color="red" />而不是<Colored text="red" />

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs JSX中带有TypeScript的CSS属性选择器

2条答案

相关问题

热门标签

最新问答