Question

我想知道如何在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中具有多种独立的条件样式？

Answer 1

您可以这样做：

Sub StartEnd()

Dim ws As Worksheet
Dim lRow As Long
Dim rng As Range
Dim c As Range
Dim cnt As Long
Dim cntTotal As Long

Set ws = ActiveSheet    'change sheet here if you want

    With ws

        lRow = .Cells(.Rows.Count, "A").End(xlUp).Row   'last row
        Set rng = .Range("B2:B" & lRow) 'excluding headers

        cntTotal = Application.CountIf(rng, ">50")  'total occurences >50

        For Each c In rng
            If IsNumeric(c.value) And c.value > 50 Then
                cnt = cnt + 1
                Select Case cnt
                    Case 1, cntTotal:   'do nothing if first or last occurence
                    Case Else: .Rows(c.Row).Hidden = True   'else hide row
                End Select
            Else
                .Rows(c.Row).Hidden = True  'hide row if <50
            End If
        Next

    End With

End Sub

带有html

const handleStyleButton = (condition) => {
    if (condition) {
     return {
        backgroundColor: 'pink',
        height: 40,
        borderRadius: 10,
        border: 'none',
        margin: '.5em',
        minWidth: 60,
        cursor: 'pointer'
     }
    }
    return {
        backgroundColor: '#fff',
        height: 40,
        borderRadius: 10,
        border: 'none',
        margin: '.5em',
        minWidth: 60,
        cursor: 'pointer'
    }
};

Answer 2

您不能在一个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>

Answer 3

您可以嵌套三元组。

请注意，这可能变得非常难以理解。

style={
  this.state.bold
    ? this.state.italic
      ? { fontWeight: "bolder", fontStyle: "italic" }
      : { fontWeight: "bolder", fontStyle: "normal" }
    : this.state.italic
      ? { fontWeight: "normal", fontStyle: "italic" }
      : { fontWeight: "normal", fontStyle: "normal" }
}

Answer 4

在CSS中。

 <style>
        .class1{
        }
        .class2
        {
        }
     </style>

在react中，根据条件使用这些类，并根据需要使用嵌套的类
。将类存储为状态

{this.state.case1?class1:class2}

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

4 个答案: