jsx style mit zustand

Question

Ich weiß, ich kann Zustand mit className tun, aber wie wäre es mit Stil?

<span style={{float:'right'}}>Something</span> 

wie für oben jsx, ich will richtig schwimmen, wenn obj.name-'active'

Answer 1

One Way gleich ist, wenn Sie die ganze style nur wollen, wenn die object.name == 'active':

<span style={obj.name == 'active' ? {float:'right'} : {}}>Something</span> 

Eine andere, Wenn Sie die Bedingung auf separate style property Werte setzen möchten:

<span style={{float: obj.name == 'active' ? 'right' : ''}}>Something</span> 

Answer 2

Sie können dies auch in der render Methode der Komponente festlegen. Ich persönlich denke, dass dies eine lesbare Lösung ist insgesamt:

render() { 
    let customStyles = obj.name === 'active' ? { float: 'right' } : {}; 
    return (<span style={customStyles}>Something</span>); 
} 

Sie benötigen für diese Arbeit natürlich obj in Rahmen haben.

Answer 3

Sie können das unten angegebene Muster verwenden.

reder(){ 
return(
let myStyle = {float:right; marginBottom:10;} //in JSX/JS hyphen sign is replaced with Camel case notation, it will automatically detected by ReactDOM renderer. 
<span style={myStyle}></span> 
); 
} 

für jede Bedingung festgelegt wird:

reder(){ 
return(
let myStyle = (obj.name == "active") ? {float:right; marginBottom:10;} : {}; 
<span style={myStyle}></span> 
); 
}