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为真时，才应添加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

如果以上任何一项都无法满足您的要求，请考虑使用类，而不是将样式直接注入到组件中。我强烈建议您使用名为classnames的库，该库旨在解决您的问题。我在许多项目中成功使用了该库，它始终是最佳解决方案。您的示例想要：

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允许您选择几种不同的动态样式切换方式之一。

动态添加类以响应组件

3 个答案: