内联样式处理

Question

我现在正在做一些React，我想知道是否有一个＆＃34;正确的＆＃34;做条件样式的方法。在教程中，他们使用

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

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

Answer 1

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

查看以上代码。这样就可以了。

Answer 2

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

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

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

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

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

Answer 3

内联样式处理

style={{backgroundColor: selected ? 'red':'green'}}

使用 CSS

在js中

className={`section ${selected && 'section_selected'}`}

在 css 中

.section {
  display: flex;
  align-items: center;
} 
.section_selected{
  background-color: whitesmoke;
  border-width: 3px !important;
}

同样可以用 Js 样式表来完成

Answer 4

另一种方式，使用内联样式和传播运算符

style={{
  ...completed ? { textDecoration: completed } : {}
}}

在某些情况下您希望根据条件同时添加一堆属性，这种方法很有用。

Answer 5

首先，我同意你的风格 - 我也会（也会）有条件地应用类而不是内联样式。但是你可以使用相同的技术：

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

Answer 6

如果您需要有条件地应用内联样式（全部应用或不应用任何样式），则该符号也适用：

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

如果未满足“ someCondition”，则您传递空对象。

Answer 7

我在尝试回答同一问题时遇到了这个问题。 McCrohan的使用类数组和联接的方法是可靠的。

根据我的经验，我一直在处理许多遗留的ruby代码，这些代码已转换为React，在构建组件时，我发现自己接触了现有的CSS类和内联样式。

组件内部的示例代码段

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

同样，我发现自己接触了旧的CSS代码，将其与组件“打包”并继续前进。

所以，我真的觉得什么是“最好的”还有些悬而未决，因为标签会因您的项目而有很大不同。

Answer 8

代替此：

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

您可以使用短路尝试以下方法：

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

链接中的关键信息：

短路意味着在JavaScript中，当我们评估一个AND表达式（&&）时，如果第一个操作数为false，则JavaScript将会短路，甚至不查看第二个操作数。

值得注意的是，如果第一个操作数为false，则此操作将返回false，因此可能必须考虑这将如何影响您的样式。

其他解决方案可能是最佳做法，但认为值得分享。

Answer 9

 style={{
              whiteSpace: "unset",
              wordBreak: "break-all",
              backgroundColor: one.read == false && "#e1f4f3",
              borderBottom:'0.8px solid #fefefe'
            }}

Answer 10

处理样式的最佳方法是使用带有一组CSS属性的类。

示例：

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

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

Answer 11

您可以使用类似的东西。

"ng build --base-href ./ "

否则，您可以使用classnames NPM包使动态和有条件的className道具更易于使用（尤其是比有条件的字符串操作更多）。

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

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

11 个答案:

内联样式处理

使用 CSS