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

JavaScript

古一番长小小

2020-03-14

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

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

我不想使用内联样式，因此我想使用类来控制条件样式。一个人将如何以React的思维方式来实现这一目标？还是应该只使用这种内联样式方式？

第1609篇《在React中处理条件样式的正确方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Gil伽罗 2020.03.14

处理样式的最佳方法是使用带有css属性集的类。

例：

<Component className={this.getColor()} />

getColor(){
let class = "badge m2";
class + = this.state.count===0?"wrarning":danger
return class
}
小小前端 2020.03.14

首先，就样式而言，我同意您的看法-我也会（也确实）有条件地应用类而不是内联样式。但是您可以使用相同的技术：

<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>;

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android