我有一個組件，如果它處于活動狀態，它的顏色為白色，如果它處于非活動狀態，則為黑色。如何將黑色作為道具傳遞？
我現在的代碼（它什么都不做）：
export function Card (props) {
return <div {...props} className={styles.gray} />
}
我想Card在三元運算子中使用此組件（稱為）來顯示該組件是否處于活動狀態。
uj5u.com熱心網友回復：
是styles你的css樣式表和gray選擇器的名字嗎？
有很多不同的方法來創建這種行為，但如果你有一個道具物件color作為道具，你可以這樣做：
<div style={{ color: props.color }}
uj5u.com熱心網友回復：
假設您在卡外設定活動狀態，這里是簡單的三元模式。
如果在卡外定義了 active：
function Card({ isActive, ...props }) {
return (
<div
className={`${styles.gray} ${isActive ? styles.active : null}`}
{...props}
/>
)
}
使用像這樣的助手clsx，它看起來像：
<div className={
clsx(
styles.gray,
isActive ? styles.active : null,
)
} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/323443.html
標籤：javascript css 反应 反应钩子
上一篇：從百分比獲取顏色范圍