小编典典

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

reactjs

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

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

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


阅读 448

收藏
2020-07-22

共1个答案

小编典典

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

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

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

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

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

POSTSCRIPT [06-AUG-2019]

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

2020-07-22