我们如何将颜色作为道具传递？

Question

我有一个组件，如果处于活动状态，则颜色为白色，如果处于非活动状态，则为黑色。 如何将黑色作为道具传递？ 我的代码现在什么都不做。

导出函数卡片（道具）{ return <div {...props} className={styles.gray} />

}

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

Answer 1

styles是您的 css 样式表的名称并将选择器设为gray吗？

有很多不同的方法来创建这种行为，但是如果你有一个带有color作为道具的道具对象，你可以这样做： <div style={{ color: props.color }}

Answer 2

假设您在卡外设置活动状态，这里是简单的三元模式。

如果在卡外定义了 active：

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

使用像clsx这样的clsx ，它看起来像：

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