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

javascript reactjs

2022-08-30 01:51:57

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

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

我不喜欢使用内联样式，所以我想改用类来控制条件样式。如何以 React 的思维方式来解决这个问题？或者我应该只使用这种内联样式方式？

答案 1

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

查看上面的代码。这将解决问题。

答案 2

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

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

您可能还会发现类名包很有帮助。有了它，你的代码将看起来像这样：

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

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

后记 [2019-08-06]

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