我现在正在做一些 React，我想知道是否有一种“正确”的方式来做条件样式。在他们使用的教程中
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
我不喜欢使用内联样式，所以我想使用类来控制条件样式。以 React 的思维方式如何解决这个问题？或者我应该只使用这种内联样式方式？
在 React 中处理条件样式的正确方法
IT技术
javascript
reactjs
2021-02-05 00:44:03
6个回答
<div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>
检查上面的代码。这样就行了。
如果您更喜欢使用类名，请务必使用类名。
className={completed ? 'text-strike' : null}
您可能还会发现classnames包很有帮助。有了它，您的代码将如下所示：
className={classNames({ 'text-strike': completed })}
没有“正确”的方式来做条件样式。做最适合你的事情。就我自己而言，我更喜欢避免内联样式并以刚刚描述的方式使用类。
后记 [06-AUG-2019]
虽然 React 对样式没有偏见，但现在我会推荐 CSS-in-JS 解决方案；即样式组件或情感。如果您是 React 的新手，请坚持使用 CSS 类或内联样式。但是一旦您对 React 感到满意，我建议您采用这些库之一。我在每个项目中都使用它们。
如果您需要有条件地应用内联样式（应用全部或不应用），则此表示法也适用：
style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}
如果“someCondition”未满足，则传递空对象。
而不是这个：
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
您可以使用短路尝试以下操作：
style={{
textDecoration: completed && 'line-through'
}}
https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb
来自链接的关键信息：
短路意味着在 JavaScript 中，当我们评估 AND 表达式 (&&) 时，如果第一个操作数为假，JavaScript 将短路，甚至不会查看第二个操作数。
值得注意的是，如果第一个操作数为假，这将返回假，因此可能必须考虑这将如何影响您的风格。
其他解决方案可能是更多的最佳实践，但认为值得分享。
另一种方式，使用内联样式和扩展运算符
style={{
...completed ? { textDecoration: completed } : {}
}}
这种方式在某些情况下很有用，您希望根据条件同时添加一堆属性。