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

Question

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

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

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

原文由 davidhtien 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

后记 [2019 年 8 月 6 日]

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

原文由 David L. Walsh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

检查上面的代码。这样就可以了。

原文由 Abhay Shiro 发布，翻译遵循 CC BY-SA 3.0 许可协议