我现在正在做一些 React,我想知道是否有一种“正确”的方式来进行条件样式。在他们使用的教程中
style={{ textDecoration: completed ? 'line-through' : 'none' }}
我不喜欢使用内联样式,所以我想使用一个类来控制条件样式。在 React 的思维方式中如何处理这个问题?还是我应该只使用这种内联样式方式?
如果您更喜欢使用类名,请务必使用类名。
className={completed ? 'text-strike' : null}
您可能还会发现classnames包很有帮助。有了它,您的代码将如下所示:
className={classNames({ 'text-strike': completed })}
没有“正确”的方法来进行条件样式。做最适合你的事情。对于我自己,我更喜欢避免内联样式并以刚才描述的方式使用类。
后记 [2019 年 8 月 6 日]
虽然 React 对样式没有意见,但这些天我会推荐一个 CSS-in-JS 解决方案。即风格化的组件或情感。如果您是 React 新手,请坚持使用 CSS 类或内联样式。但是,一旦您对 React 感到满意,我建议您采用这些库之一。我在每个项目中都使用它们。