反应添加条件样式 (&&)

Question

同样的新手。我有按预期工作的代码，我所要做的就是添加&&与state变量(布尔)，使文本具有行贯装饰，同时点击(使用crossedItemOnClick)

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function Para(props) {
const {id, className, info, state} = props;

return (
<p onClick={props.crossedItemOnClick} id={id} className={className} style={{textDecorationLine: 'line-through'}}>{info}</p>
)
}
export default Para;

如果我把它改成

整个页面就会消失

<p onClick={props.crossedItemOnClick} id={id} className={className} style={state && {textDecorationLine: 'line-through'}}>{info}</p>

我想知道我做错了什么，为什么页面完全消失了。当然，如果你愿意的话，我还需要解释一下。很多谢谢!

Answer 1

这是因为styleprop期望对象类型CSSProperties，如果你的条件是假的，你会结束像style={false}的东西，这将导致你的应用程序崩溃，因为你提供的HTML元素无效的样式。

最简单的解决方案是将这部分重写为style={state ? {...someStyle} : {}}

Answer 2

style属性在react中以object作为值。正确的做法是:

<p onClick={props.crossedItemOnClick} id={id} className={className} style={state ? {textDecorationLine: 'line-through'}:{}}>{info}</p>

假设你必须在state为true时应用样式

Answer 3

你的方法基本上是正确的，但是，如果你想使用&&

，你的条件应该像这样直接应用到style属性上

style={{textDecorationLine: state && 'line-through'}}