2017-12-19 8 views
1

Ich schreibe eine einfache React-Komponente, wo ich den Komponentenstil ändern, wenn der Mauszeiger auf der Komponente ist. Ich konnte meine Komponente funktionieren lassen, aber ich habe zwei Stylesheets, die fast gleich sind. Ein Stil wird für onMouseOver verwendet und der andere wird für onMouseOut Ereignis verwendet. Der Unterschied zwischen den beiden Stylesheets ist nur eine Zeile: die border Definition.Erweitern gemeinsame CSS-Definition in React

Ich möchte duplizierten CSS-Definitionen vermeiden, und ich möchte meine CSS vereinfachen nach folgendem:

  • ein basisches Sheet, das die Suche der Komponente
  • einen Stil für onMouseOver erstreckt Grund beschreibt Ereignis (enthält nur Grenze)
  • ein anderer Stil für onMouseOut Ereignis Grund verlängern (enthält nur Grenze)

Dies ist das Stylesheet definit Ion, was ich mag zu verwenden:

const STYLE = { 
    box: { 
    '-moz-border-radius': '15px', 
    '-moz-box-shadow': '#B3B3B3 13px 13px 13px', 
    '-webkit-box-shadow': '#B3B3B3 13px 13px 13px', 
    'background-color': '#E3A20B', 
    'border-radius': '15px', 
    'border': '5px solid #FFFF00', 
    'box-shadow': '#B3B3B3 13px 13px 13px', 
    'float': 'left', 
    'height': '215px', 
    'margin': '15px', 
    'width': '150px' 
    }, 

    boxMouseOver: { 
    'border': '5px solid #000000', 
    }, 

    boxMouseOut: { 
    'border': '5px solid #FFFF00', 
    } 
} 

Das ist mein Arbeits Code verwendet zwei Stylesheets:

<div style={this.state.mouseOver ? STYLE.boxOver : STYLE.boxDefault} onMouseOver={...} onMouseOut={...}> 
    ... 
</div> 

Und das ist, was ich tun möchte, aber leider funktioniert es nicht:

Was ist der richtige Weg, um zwei verschiedene Stile zu einer Komponente hinzuzufügen oder wie kann ich die Konstante STYLE.box erweitern und die Eigenschaft border in Stylesheets für Abstieg neu definieren?

Antwort

1

const STYLE = { 
 
    box: { 
 
    '-moz-border-radius': '15px', 
 
    '-moz-box-shadow': '#B3B3B3 13px 13px 13px', 
 
    '-webkit-box-shadow': '#B3B3B3 13px 13px 13px', 
 
    'background-color': '#E3A20B', 
 
    'border-radius': '15px', 
 
    'border': '5px solid #FFFF00', 
 
    'box-shadow': '#B3B3B3 13px 13px 13px', 
 
    'float': 'left', 
 
    'height': '215px', 
 
    'margin': '15px', 
 
    'width': '150px' 
 
    }, 
 

 
    boxMouseOver: { 
 
    'border': '5px solid #000000', 
 
    }, 
 

 
    boxMouseOut: { 
 
    'border': '5px solid #FFFF00', 
 
    } 
 
} 
 

 
<div style={{...STYLE.BOX, ...(this.state.mouseOver ? STYLE.boxOver : STYLE.boxDefault)}} onMouseOver={...} onMouseOut={...}> 
 
    ... 
 
</div>

Dies muss

+0

Das ist so knifflige Syntax vor allem, wenn ich es mit Java vergleichen;) Wie auch immer, es funktioniert wie ein Zauber. Könnten Sie bitte das fehlende '}' Zeichen in Ihrem Beispiel hinzufügen? Vielen Dank. – zappee

1

Sie können das Objektzerstörungsmuster verwenden, um die gemeinsamen Teile von Stilen beizubehalten und die Eigenschaften, die Sie in diesem Objekt benötigen, nach Bedarf zu ändern.

const commonStyle = { 
    box: { 
    '-moz-border-radius': '15px', 
    '-moz-box-shadow': '#B3B3B3 13px 13px 13px', 
    '-webkit-box-shadow': '#B3B3B3 13px 13px 13px', 
    'background-color': '#E3A20B', 
    'border-radius': '15px', 
    'border': '5px solid #FFFF00', 
    'box-shadow': '#B3B3B3 13px 13px 13px', 
    'float': 'left', 
    'height': '215px', 
    'margin': '15px', 
    'width': '150px' 
    } 
} 

const boxMouseOverStyles = {...commonStyle, ...{'border': '5px solid #000000'}}; 
const boxMouseOutStyles = {...commonStyle, ...{'border': '5px solid #FFFF00'}}; 

<div style={this.state.mouseOver ? boxMouseOverStyles : boxMouseOutStyles} onMouseOver={...} onMouseOut={...}> 
    ... 
</div> 
+0

Danke für die Antwort arbeiten, aber es scheint, dass die "... commonStyle" Teil nicht funktioniert. Die BoxMouseOverStyles und BoxMouseOutStyles enthalten nur die Rahmendefinition. Der Rest fehlt. – zappee