動態添加類以響應組件

Question

我有以下反應成分

const style = {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

const isDoneStyle = {
    "text-decoration":"line-through"
}

export default function Todo({name,isComplete,date}) {

    return (
    <li style={}>
        <p>Task: {name}</p>
        <input type="checkbox" defaultChecked={isComplete}/>
        <p>{date}</p>
    </li>
    );
}

所有li都應具有style類，但僅當isComplete為true時，才應添加isDoneStyle 。 我該如何實現？

Answer 1

注意，React中的樣式屬性必須是駝峰式的。

const style = {
    border:"2px solid grey",
    marginBottom:"2px",
    listStyle:"none",
    textAlign:"center"
}

const isDoneStyle = {
    textDecoration:"line-through"
}

您可以使用三元運算符來決定要使用的style對象。 此外，您可以使用散布運算符將您要使用的對象的屬性組合到單個對象中。

<li style={ isComplete ? {...style, ...isDoneStyle} : {...style} }>
    <p>Task: {name}</p>
    <input type="checkbox" defaultChecked={isComplete}/>
    <p>{date}</p>
</li>

Answer 2

您可以使用函數來定義那些樣式

const style = {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

const isDoneStyle = {
    "text-decoration":"line-through"
}

const getStyle = isComplete => isComplete ? {...style, ...isDoneStyle} : style

export default function Todo({name,isComplete,date}) {
    return (
    <li style={getStyle(isComplete)}>
        <p>Task: {name}</p>
        <input type="checkbox" defaultChecked={isComplete}/>
        <p>{date}</p>
    </li>
    );
}

Answer 3

如果以上任何一項都無法滿足您的要求，請考慮使用類，而不是將樣式直接注入到組件中。 我強烈建議使用稱為類名的庫，該庫旨在解決類似您的問題。 我在許多項目中成功使用了該庫，它始終是最佳解決方案。 您的示例想要：

CSS：

.main-layout {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

.done-layout {
    "text-decoration":"line-through"
}

陣營：

export default function Todo({name,isComplete,date}) {
return (
<li className={
    classNames({
       main-layout: true,
       done-layout: isComplete
    }
>
    <p>Task: {name}</p>
    <input type="checkbox" defaultChecked={isComplete}/>
    <p>{date}</p>
</li>
);
}

如果您不喜歡這種方法，請放心。 classNames允許您選擇幾種不同的動態樣式切換方式之一。