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 中有更好的方法吗？
2 条回复
1楼 Woohaik 1 已采纳 2023-02-01 18:12:46
在这种情况下，使用React.HTMLAttributes<HTMLDivElement>类型，您可以将其他属性传递给维护组件Colored的DIV 。
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"/>
2楼 Nokwiw -1 2023-02-01 18:21:17
我为您创建了一个codeSandBox示例：
- 而不是
<Colored text="red" />你应该使用<Colored color="red" />
问题未解决？试试搜索： JSX 中的 CSS 属性选择器与 TypeScript。
反应不允许两个 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ：一个 jsx 元素上的焦点选择器
[英]react not allowing two css : focus selectors on one jsx element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.