React 添加條件樣式 (&&)

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

style 屬性在反應中將object作為值。 正確的方法是：

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

假設您必須在狀態為真時應用樣式。

Answer 2

這是因為style prop CSSProperties類型的對象，如果您的條件為 false，您最終會得到類似style={false}的東西，這將導致您的應用程序崩潰，因為您提供的 HTML 元素的樣式無效。

最簡單的解決方案是將該部分重寫為style={state ? {...someStyle} : {}} style={state ? {...someStyle} : {}}

Answer 3

您的方法大部分是正確的，但是，如果您想使用 &&，您的條件應該像這樣直接應用於樣式屬性

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