在React中處理條件樣式的正確方法

我正在做一些React，我想知道是否有一種「正確」的方式來做條件樣式。在他們使用的教程中在React中處理條件樣式的正確方法

style={{ 
    textDecoration: completed ? 'line-through' : 'none' 
}}

我不喜歡使用內聯樣式，所以我想改爲使用類來控制條件樣式。在React思維方式中，人們會如何解決這個問題？或者我應該只使用這種內聯樣式？

來源

2016-03-03 davidhtien

我想你可能會對'redux'和'react'感到困惑。 Redux與造型無關。 – rossipedia

我認爲您的偏好是針對文檔的，但對於標記交換compat不重要的應用程序過於熱衷。一些主要的網絡應用程序實際上正在擺脫類，並只使用內聯樣式，這是更可預測和更容易推理，而不是5個應用規則中的哪一個使文本變爲粗體。當屬性是動態的時候，你不會像重複文檔那樣節省很多帶寬。應用程序的語義（查看源代碼標記）也不是那麼重要... – dandavis

@rossipedia啊是的，謝謝你，混淆了，看着REDX教程時想到這個，謝謝！ – davidhtien

如果你喜歡使用一個類名，通過各種手段使用類名稱。

className={completed ? 'text-strike' : null}

您還可能發現classnames包有幫助。有了它，你的代碼將如下所示：

className={classNames({ 'text-strike': completed })}

有沒有「正確」的方式來做條件樣式。做任何最適合你的工作。對於我自己，我更喜歡避免使用內聯樣式，並按照剛纔描述的方式使用類。

來源

2016-03-03 03:21:12

首先，我同意你的風格問題 - 我也（並且也）有條件地應用類而不是內聯樣式。但是你可以使用同樣的技術：

<div className={{completed ? "completed" : ""}}></div>

對於更復雜的套狀態，積累類數組的形式，並將其應用：

var classes = []; 

if (completed) classes.push("completed"); 
if (foo) classes.push("foo"); 
if (someComplicatedCondition) classes.push("bar"); 

return <div className={{classes.join(" ")}}></div>;

來源

2016-03-03 03:20:20

<div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

簽出上面的代碼。這將做到這一點。

來源

2017-12-16 09:57:06

正在尋找像這樣的東西。有條件的內聯樣式，謝謝。 –

在React中處理條件樣式的正確方法

回答

相關問題