小编典典

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

all

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

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

我不喜欢使用内联样式,所以我想使用一个类来控制条件样式。在 React 的思维方式中如何处理这个问题?还是我应该只使用这种内联样式方式?


阅读 214

收藏
2022-08-08

共1个答案

小编典典

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

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

您可能还会发现classnames包很有帮助。有了它,您的代码将如下所示:

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

没有“正确”的方法来进行条件样式。做最适合你的事情。对于我自己,我更喜欢避免内联样式并以刚才描述的方式使用类。

后记 [2019 年 8 月 6 日]

虽然 React 对样式没有意见,但这些天我会推荐一个 CSS-in-JS 解决方案。即风格化的组件情感。如果您是 React
新手,请坚持使用 CSS 类或内联样式。但是,一旦您对 React 感到满意,我建议您采用这些库之一。我在每个项目中都使用它们。

2022-08-08