如何在reactjs的同一个div上使用多个独立的条件样式？

anant 发表于 Dev

一只蚂蚁

我想知道如何在React JS的同一个div上使用多个独立的条件样式。对于一种情况，我们可以使用三元运算符。但是我想使用不同的独立条件。

例如：我有一个文本区域，并且我有三个带有粗体，斜体和下划线的按钮。我想如果我单击任何按钮将执行其各自的任务。

这很好

<textarea
        onChange={this.handleChange}
        style={ this.state.bold ? {fontWeight: 'bolder'} : {fontStyle: 
        'normal'}}
        />

但这不是：

<textarea
        onChange={this.handleChange}
        style={ this.state.bold ? {fontWeight: 'bolder'} : {fontWeight: 
        'normal'}}
        style={ this.state.italic? {fontStyle: 'italic'} : {fontStyle: 
        'normal'}}
        />

如何在reactjs中具有多种独立的条件样式？

根

您不能在一个div中添加两种样式，也许不是一个好选择，可以同时使用style和className：

style={ this.state.bold ? {fontWeight: 'bolder'} : {fontWeight: 
        'normal'}}
className={ this.state.italic? {fontStyle: 'italic'} : {fontStyle: 
        'normal'}}

您也可以尝试以下操作：

setStyle (){
    let styles = {}
    if (this.state.first === 'first'){
        const firstStyle = {
           ...
        }
        styles = Object.assign(styles,firstStyle)
    }
    if (this.state.second === 'second'){
        const secondStyle = {
            ...
        }
        styles = Object.assign(styles,secondStyle)
    }
    if (this.state.third === 'third'){
        const thirdStyle = {
            ...
        }
        styles = Object.assign(styles,thirdStyle)
    }
    return styles
}
....
<div style={this.setStyle()}>Test</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。