JSX 中的 CSS 属性选择器与 TypeScript

Question

我可以在纯 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 中有更好的方法吗？

Answer 1

在这种情况下，使用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"/>

Answer 2

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

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