我现在正在做一些React,我想知道是否有一种“正确的”方式来进行条件样式设计。在本教程中,他们使用
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
我不想使用内联样式,因此我想使用类来控制条件样式。一个人将如何以React的思维方式来实现这一目标?还是应该只使用这种内联样式方式?
在React中处理条件样式的正确方法
我现在正在做一些React,我想知道是否有一种“正确的”方式来进行条件样式设计。在本教程中,他们使用
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
我不想使用内联样式,因此我想使用类来控制条件样式。一个人将如何以React的思维方式来实现这一目标?还是应该只使用这种内联样式方式?
第1609篇《在React中处理条件样式的正确方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
首先,就样式而言,我同意您的看法-我也会(也确实)有条件地应用类而不是内联样式。但是您可以使用相同的技术:
<div className={{completed ? "completed" : ""}}></div>
对于更复杂的状态集,请累积一组类并应用它们:
var classes = [];
if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");
return <div className={{classes.join(" ")}}></div>;
相似问题
问题类别
处理样式的最佳方法是使用带有css属性集的类。
例: