我们如何传递一个颜色作为一个道具?

Question

我有一个组件，如果它处于活动状态，颜色为白色，如果它处于非活动状态，颜色为黑色。一个人怎么能把黑色当作道具?

我现在的代码(它什么都不做):

export function Card (props) {
return <div {...props} className={styles.gray} />
}

我想在三元运算符中使用这个组件(称为Card)来显示该组件是否处于活动状态。

Answer 1

假设您在卡片外部设置活动状态，下面是简单的三元模式。

如果活动在卡外定义:

function Card({ isActive, ...props }) {
return (
<div
className={`${styles.gray} ${isActive ? styles.active : null}`}
{...props}
/>
)
}

使用像clsx这样的帮助器，它看起来像:

<div className={
clsx(
styles.gray,
isActive ? styles.active : null,
)
} />

Answer 2

是styles你的css样式表和gray选择器的名称?

有一堆不同的方法来创建这个行为，但一个简单的，如果你有一个道具对象与color作为一个道具，你可以这样做:<div style={{ color: props.color }}