在React中处理条件样式的正确方法

Question

我现在正在做一些React，我想知道是否有一种“正确的”方式来进行条件样式设计。在本教程中，他们使用

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

我不想使用内联样式，因此我想使用一个类来控制条件样式。一个人将如何以React的思维方式来实现这一目标？还是应该只使用这种内联样式方式？

Answer 1

如果您更喜欢使用类名，请务必使用类名。

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

您可能还会发现类名称包很有用。有了它，您的代码将如下所示：

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

没有“正确”的方法来进行条件样式设计。做最适合您的事情。就我自己而言，我更喜欢避免内联样式，而是以上述方式使用类。

POSTSCRIPT [06-AUG-2019]

尽管React在样式方面毫无疑问，但这些天我还是会推荐CSS-in-JS解决方案。即风格成分或情感。如果您不熟悉React，请坚持使用CSS类或内联样式。但是一旦您对React感到满意，我建议您采用其中一种库。我在每个项目中都使用它们。